/* «Квесты героя» — облик V2 «Город будущего» (Этап 0.9). Значения взяты из утверждённого дизайна (gen/core.py, gen/build.py,
   gen/theme.py). Смешивание цветов функцией не используется: производные цвета записаны готовыми значениями (старые WebView Telegram её не знают).
   Шрифты свои: Unbounded для заголовков и чисел, Onest для остального; на сервер едут только эти три файла. */
@font-face { font-family: "Unbounded"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/unbounded-500.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/onest-400.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/onest-500.woff2") format("woff2"); }

:root {
  /* семья «Мята и шалфей» */
  --ink: #25332B;
  --muted: #5D6F64;
  --muted-sky: #56685D; /* вторичный текст прямо на небе: на #D6EBF5 даёт 4,83:1 (у --muted там 4,35:1) */
  --accent: #37735A;
  --tint: #D9ECE1;
  --deco: #E8B86D;
  --card: #FFFFFF;
  --bg: #F3F8F4;
  --bg-solid: #E3F1F1;
  --sky: radial-gradient(90% 45% at 92% -2%, rgba(246, 216, 153, .48) 0, rgba(246, 216, 153, 0) 60%),
    linear-gradient(180deg, #D6EBF5 0%, #E4F2F5 32%, #E9F5F0 60%, #DBEDE4 100%);
  /* стекло */
  --glass: rgba(255, 255, 255, .66);
  --glass-flat: rgba(255, 255, 255, .48);
  --sheet: rgba(255, 255, 255, .95);
  --tabbar: rgba(255, 255, 255, .74);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .92);
  --sh: 0 1px 2px rgba(30, 60, 55, .05), 0 14px 34px -18px rgba(30, 70, 70, .32);
  --sh-tab: 0 16px 32px -16px rgba(30, 70, 70, .4);
  --sh-lg: 0 2px 6px rgba(37, 51, 43, .06), 0 22px 44px -16px rgba(37, 51, 43, .26);
  /* производные */
  --line: rgba(37, 51, 43, .09);
  --track: #F0F1F0;
  --soft: #EFF7F2;
  --deco-soft: #F9EEDC;
  --deco-ink: #736845;
  --xp-ink: #6B521C;
  --accent-soft: #E7EEEB;
  --a1: #CDE6D8;   /* день календаря «1–2 действия» и его легенда; текст на нём — --ink */
  --scrim: rgba(37, 51, 43, .34);
  /* янтарь: отказы и «не хватает» (красного в облике нет) */
  --amber-ink: #7A5310;
  --amber-tint: #FCEFD6;
  --amber-line: #D9A441;
  /* единственный красный: точка записи */
  --rec: #E0503C;
  /* шрифты, размеры */
  --fh: "Unbounded", "Onest", system-ui, sans-serif;
  --fb: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 28px;
  --gutter: 16px;
  --nav-h: 62px;
  --nav-gap: 24px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-solid);
  background-image: var(--sky);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 16px/1.45 var(--fb);
  overflow-x: hidden;
}

.panel {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
    calc(var(--nav-h) + var(--nav-gap) + 24px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- районы города: цвета шести групп сфер (--g-base — заливка, --g-deep — значки и текст, --g-tint — фон) ---------- */
.g-people { --g-base: #C784B0; --g-deep: #9A4F82; --g-tint: #F7E9F2; }
.g-joy { --g-base: #6AAFD6; --g-deep: #2F7AA6; --g-tint: #E3F1F9; }
.g-home { --g-base: #E2AE55; --g-deep: #946510; --g-tint: #FBF0DA; }
.g-work { --g-base: #4FA694; --g-deep: #22786A; --g-tint: #DDF1EC; }
.g-growth { --g-base: #8E82D6; --g-deep: #5B4FB0; --g-tint: #ECE9FA; }
.g-body { --g-base: #8DBA5E; --g-deep: #4E7D2A; --g-tint: #E9F3DF; }

/* ---------- стекло: карточка, шторка ---------- */
.card, .loading {
  position: relative;
  min-width: 0;
  padding: 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-radius: var(--radius);
  box-shadow: var(--glass-edge), var(--sh);
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.card.lg { border-radius: 30px; padding: 18px; }
.card.cap { border-radius: 44px; }
.card.flat { background: var(--glass-flat); box-shadow: var(--glass-edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card.dome { border-radius: 179px 179px 30px 30px / 179px 179px 30px 30px; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 480px; margin: 0 auto;
  padding: 10px 16px calc(34px + env(safe-area-inset-bottom));
  background: var(--sheet); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border-radius: 32px 32px 0 0; box-shadow: 0 -12px 40px -10px rgba(37, 51, 43, .3);
}
.scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 29; background: var(--scrim); }
.scrim.light { background: rgba(37, 51, 43, .18); }
.grab { width: 38px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: rgba(37, 51, 43, .16); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--tint); color: var(--ink); font-size: 13px; white-space: nowrap; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card-title { margin: 0 0 10px; font: 500 12px/1.2 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card-head .card-title { margin: 0; }
.card-title[tabindex="-1"]:focus, .crisis[tabindex="-1"]:focus { outline: none; }
.muted { color: var(--muted); margin: 0 0 6px; }
/* текст прямо на небе, не на стекле */
.panel > .muted, .panel > .disclaimer, .tasks > .muted, .tasks > .disclaimer { color: var(--muted-sky); }

/* ---------- шрифты: Unbounded для заголовков и чисел, Onest для остального ---------- */
.h1 { font: 500 22px/1.25 var(--fh); letter-spacing: -.01em; }
.h2 { font: 500 18px/1.3 var(--fh); }
.h3 { font: 500 17.5px/1.38 var(--fb); }
.h4 { font: 500 15.5px/1.3 var(--fb); }
.qt { font: 500 20px/1.36 var(--fb); letter-spacing: -.005em; }
.num, .stat { font-family: var(--fh); font-weight: 500; font-variant-numeric: tabular-nums; }
.stat { font-size: 19px; line-height: 1; }
.eb { display: flex; align-items: center; gap: 6px; font: 500 11px/1.2 var(--fb); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { flex: none; width: 20px; height: 20px; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  border: 0; border-radius: 26px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.2px rgba(37, 51, 43, .16);
  color: var(--ink); font: 500 16px/1.2 var(--fb); letter-spacing: .01em; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { filter: brightness(.96); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.btn { text-decoration: none; }
.btn-primary, .btn.p {
  grid-column: 1 / -1; min-height: 52px; background: var(--accent); box-shadow: 0 10px 20px -12px rgba(55, 115, 90, .8);
  color: #FFFFFF; font-size: 17px;
}
.btn-soft, .btn.s { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.2px rgba(55, 115, 90, .3); }
.btn-outline, .btn.o { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.2px rgba(37, 51, 43, .16); }
.btn-quiet, .btn.q { background: transparent; box-shadow: none; color: var(--accent); min-height: 40px; }
.btn-ink { background: var(--ink); box-shadow: none; color: #FFFFFF; }
.btn-sm, .btn.sm { min-height: 40px; padding: 0 16px; border-radius: 20px; font-size: 15px; }
.btn-sm.btn-quiet, .btn.sm.q { padding: 0 6px; }
.btn-primary-lite { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.2px rgba(55, 115, 90, .55); }
.btn-link { background: transparent; box-shadow: none; color: var(--muted); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- чипы, станции, значки сфер ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 9px; border-radius: 14px;
  background: var(--tint); color: var(--ink); font: 500 13px/1 var(--fb); white-space: nowrap;
}
.chip.sm { height: 24px; font-size: 12px; padding: 0 9px 0 7px; border-radius: 12px; }
.chip.o { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.25px rgba(37, 51, 43, .16); }
.chip.dash { background: transparent; border: 1.25px dashed rgba(37, 51, 43, .32); }
.chip.honey { background: var(--deco-soft); }
.chip.card { background: rgba(255, 255, 255, .85); box-shadow: var(--sh); padding: 0 11px 0 9px; border-radius: 14px;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.chip.on { background: var(--accent); color: #FFFFFF; }
.chip.ok { background: var(--tint); }
.chip.hyp { background: transparent; border: 1.25px dashed rgba(37, 51, 43, .3); }
/* станция и значок сферы: белый круг с кольцом 1,4 px цвета района; семечко — пунктир */
.station, .sbadge {
  display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
  background: #FFFFFF; box-shadow: inset 0 0 0 1.4px var(--g-base, var(--accent)); color: var(--g-deep, var(--accent));
}
.station.seed, .sbadge.seed { background: rgba(255, 255, 255, .85); box-shadow: none; border: 1.4px dashed var(--g-base, var(--accent)); }
.ibox { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: #FFFFFF; box-shadow: inset 0 0 0 1.3px rgba(55, 115, 90, .35); color: var(--accent); }
.ibox.r { border-radius: 50%; }
.ibox.honey { background: #FFFFFF; box-shadow: inset 0 0 0 1.3px rgba(201, 138, 46, .55); color: #8A5A12; }
.xp { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 8px; border-radius: 13px;
  background: var(--deco-soft); font: 500 12px/1 var(--fh); letter-spacing: -.01em; color: var(--xp-ink); }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--tint); font: 500 11px/1 var(--fh); color: var(--ink); }
.avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--tint); overflow: hidden; }
.avatar.sm { width: 36px; height: 36px; }
.days { display: flex; flex-direction: column; align-items: center; flex: none; padding-left: 14px; margin-left: 2px; box-shadow: -1px 0 0 var(--line); }

/* ---------- полосы, переключатели, строки, поля ---------- */
.bar { position: relative; height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; }
.bar > i, .bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.seg { display: flex; height: 40px; padding: 3px; border-radius: 20px; background: rgba(255, 255, 255, .45); box-shadow: var(--glass-edge); }
.seg > a, .seg > button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 17px; background: transparent;
  color: var(--muted); font: 500 13.5px/1 var(--fb); text-decoration: none;
}
.seg > a.on, .seg > button.on { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 3px rgba(37, 51, 43, .12); }
.iseg { display: flex; padding: 3px; border-radius: 18px; background: rgba(255, 255, 255, .45); box-shadow: var(--glass-edge); }
.iseg > a, .iseg > button {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 30px; border: 0; border-radius: 15px;
  background: transparent; color: var(--muted);
}
.iseg > a.on, .iseg > button.on { background: #FFFFFF; color: var(--accent); box-shadow: 0 1px 3px rgba(37, 51, 43, .12); }
.lrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.lrow + .lrow { box-shadow: 0 -1px 0 var(--line); }
.field {
  display: block; min-height: 52px; margin-bottom: 12px; padding: 7px 12px 8px; border-radius: 16px;
  background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1.5px var(--line);
}
.field label, .field-label { display: block; margin: 0 0 2px; font: 400 11.5px/1.2 var(--fb); color: var(--muted); }
.field .v { font: 500 16px/1.35 var(--fb); color: var(--ink); }
.field.focus, .field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.field.miss, .field-missing { background: var(--amber-tint); box-shadow: none; border: 1.5px dashed var(--amber-line); }
.field.miss .v, .field-missing .input { color: var(--amber-ink); }
.field .input { min-height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.field .input:focus-visible { outline: none; }
.amber {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: var(--amber-tint); color: var(--amber-ink); font: 400 14px/1.4 var(--fb);
}
.amber .ic { margin-top: 1px; color: var(--amber-ink); }
.note { display: flex; align-items: flex-start; gap: 8px; font: 400 12.5px/1.4 var(--fb); color: var(--muted); }
.note .ic { margin-top: 1px; }
.toggle { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: #DCDEDD; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 21px; }
.skel { height: 14px; margin-top: 10px; border-radius: 7px; background: var(--track); }
.skel-wide { height: 56px; margin-top: 0; border-radius: 14px; }
.skel-short { width: 60%; }
.rate {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 10px 24px -14px rgba(30, 70, 70, .35); font: 500 20px/1 var(--fh); color: var(--ink);
}
.rate.on { background: var(--accent); color: #FFFFFF; }

/* ---------- голос ---------- */
.mic-big {
  position: relative; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%;
  background: var(--accent); color: #FFFFFF;
  box-shadow: 0 0 0 14px rgba(55, 115, 90, .12), 0 0 0 30px rgba(55, 115, 90, .06), 0 18px 30px -12px rgba(55, 115, 90, .7);
}
.recdot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }

/* ---------- тропа и плитки районов ---------- */
.trail { --gc: var(--g-base, var(--accent)); position: relative; padding-left: 0; }
.trail::before { content: ""; position: absolute; left: 19px; top: 30px; bottom: 24px; width: 2px; opacity: .5;
  background: repeating-linear-gradient(to bottom, var(--gc) 0 5px, transparent 5px 10px); }
.trail .ch { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 12px 0 6px 52px; }
.trail .ch::before { content: ""; position: absolute; left: 14px; top: 16px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--gc); }
.tnode { position: relative; display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.tnode .tn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
  border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1.4px var(--g-base, var(--accent)); }
.tmore { padding: 2px 0 4px 52px; color: var(--accent); font-weight: 500; }
.ghead { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--fb); color: var(--muted); }
.ghead i { width: 10px; height: 10px; border-radius: 50%; background: var(--g-base, var(--accent)); }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* плитка растёт, если имени нужна третья строка (узкий экран), но не бывает ниже 76 px */
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 76px; padding: 9px 10px 8px;
  border-radius: 18px; overflow: hidden; background: var(--g-tint, var(--soft)); color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* заливка — цвет района, разбавленный белым на 45 % (gen: mix(base, #FFFFFF, .45)), непрозрачная: белый слой поверх base */
.tile .tfill {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 14px 14px 0 0;
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)), var(--g-base, var(--accent));
}
.tile.seed { background: var(--card); border: 1.5px dashed var(--g-base, var(--accent)); }
.tile-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tile-top .ic { width: 18px; height: 18px; color: var(--g-deep, var(--accent)); }
.tile-pct { font-size: 14px; line-height: 1; color: var(--ink); }
.tile-seed { font: 400 12px/1 var(--fb); color: var(--g-deep, var(--accent)); }
/* слово не режется посередине: длинное переносится по-русски с дефисом (lang="ru" у страницы); токен без места переноса
   (латиница, разметка) — последним средством overflow-wrap, а не обрезкой у края плитки (N1 ревью 8b) */
.tname {
  position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 500 12.5px/1.2 var(--fb); color: var(--ink); -webkit-hyphens: auto; hyphens: auto; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere;
}
/* экраны уже 375 px: поле имени 69–84 px — поля поменьше, 12 px и три строки */
@media (max-width: 374px) {
  .tile { padding-left: 8px; padding-right: 8px; }
  .tname { font-size: 12px; -webkit-line-clamp: 3; }
}
.tile:focus-visible, .seeds-card:focus-visible, .iseg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- колесо: план круглого города (макеты 3-01, 3-02, 3-10, мини-город 2-01) ---------- */
.wheel-tab, .wheel-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wheel-head { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.wheel-head .h1 { flex: 1 1 auto; min-width: 0; margin: 0; }
/* «Колесо · Список»: кнопка 36×30, а место нажатия — 44 px в высоту (невидимое продолжение кнопки) */
.iseg > button { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.iseg > button::after { content: ""; position: absolute; top: -7px; bottom: -7px; left: 0; right: 0; }
/* город во всю ширину экрана 390 (за полями панели); на узком экране он сжимается по ширине — viewBox сохраняет пропорции */
.city-wrap { display: flex; justify-content: center; margin: 0 -16px; }
.city { display: block; max-width: 100%; height: auto; overflow: visible; }
/* шрифты подписей города (цвета — атрибутами из wheel.js) */
.city-label { font: 500 9.8px/1 var(--fb); letter-spacing: 1.3px; }
.city-eyebrow { font: 400 9.5px/1 var(--fb); letter-spacing: 1px; }
.city-mean { font: 500 23px/1 var(--fh); letter-spacing: -.5px; }
.city-mini .city-mean { font-size: 34px; letter-spacing: -1px; }
.city-name { font: 500 10.2px/1 var(--fb); }
.city-pct { font: 500 18px/1 var(--fh); }
.city-seed { font: 400 10px/1 var(--fb); }
/* тень белого центра (gen: feDropShadow 0 3 5, #1E4A46 .16) */
.city-hub { filter: drop-shadow(0 3px 5px rgba(30, 74, 70, .16)); }
/* точки пиктограммы «Хобби» закрашены currentColor: на станции это deep района */
.city .st { color: var(--g-deep, var(--accent)); }
/* сектор нажатия прозрачен; с клавиатуры видна его обводка */
.city .hit { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.city .hit:focus { stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.city .hit:focus:not(:focus-visible) { stroke: none; }
/* квартал вырос (D9): белая кромка и свечение цвета района (gen: белый путь под кварталом со свечением);
   рост от 0,6 и проявление — только когда движение не отключено. Свечение — CSS-фильтр, а его WebKit к элементам SVG
   может не применять: тогда рост всё равно виден по масштабу и прозрачности, без фильтра */
.block-grow {
  transform-box: view-box; transform-origin: 195px 195px;
  filter: drop-shadow(0 0 1px #FFFFFF) drop-shadow(0 0 1.2px #FFFFFF) drop-shadow(0 0 4px var(--g-base));
}
.wheel-sel .city-wrap { margin-top: 4px; }
/* карточка семечек: до трёх станций внахлёст, число и имена */
.seeds-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.seeds-badges { display: flex; flex: none; }
.seeds-badges .station + .station { margin-left: -8px; }
.seeds-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.seeds-names {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 400 13px/1.38 var(--fb); color: var(--muted);
}
.seeds-chev { width: 18px; height: 18px; color: var(--muted); }
/* экраны уже 360 px: две станции и поля поуже — имена семечек помещаются в две строки */
@media (max-width: 359px) {
  .seeds-card { gap: 10px; padding: 12px; }
  .seeds-badges .station:nth-child(n+3) { display: none; }
}
/* строка правила и легенда списка — прямо на небе */
.wheel-rule { margin: 0; padding: 0 4px; color: var(--muted-sky); }
.wheel-rule .ic { width: 15px; height: 15px; }
.city-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.city-legend .ghead { color: var(--muted-sky); }

/* ---------- шторка сферы и семечко (макеты 3-02, 3-03, 3-05; D8) ---------- */
/* наполовину: под городом, содержимое прокручивается, кнопки внизу; во всю высоту — от 88 px сверху, с затемнением */
.sphere-sheet { display: flex; flex-direction: column; max-height: 50vh; padding-top: 6px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.sphere-sheet.full { top: 88px; max-height: none; }
.scrim[hidden] { display: none; }
.sheet-top { position: relative; flex: none; height: 30px; }
.sheet-grip { position: absolute; top: -6px; bottom: 0; left: 52px; right: 52px; display: flex; justify-content: center; padding-top: 10px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sheet-grip .grab { margin: 0; }
/* ✕: значок 20 px, место нажатия 44×44 */
.sheet-close {
  position: absolute; top: -8px; right: -10px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sheet-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sheet-actions { display: flex; flex: none; gap: 10px; padding-top: 12px; }
/* две кнопки в ряд: «Дерево навыков» в 15 px — 122 px подписи, со значком и полями 164 px — помещается от 375 px */
.sheet-actions > .btn { flex: 1 1 0; min-width: 0; gap: 6px; padding-left: 8px; padding-right: 8px; font-size: 15px; }
/* уже 375 px: подпись важнее значка — без него подпись помещается в строку и на 320 px */
@media (max-width: 374px) {
  .sphere-sheet .sheet-actions > .btn .ic { display: none; }
}
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sheet-title { margin: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
/* заголовки, на которые фокус ставит код (выбор сферы, смена шага рассказа), рамку не рисуют */
.sheet-title[tabindex="-1"]:focus, .sphere-chip[tabindex="-1"]:focus, .told-title[tabindex="-1"]:focus, .pause-title[tabindex="-1"]:focus,
.tree-title[tabindex="-1"]:focus { outline: none; }
.sheet-district { color: var(--muted); font-size: 13px; }
.sheet-depth { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.sheet-pct { font-size: 28px; line-height: 1.1; color: var(--g-deep, var(--accent)); }
.sheet-depth-label { color: var(--muted); font-size: 12px; }
/* полоса глубины: освоенное — цвет района, то, что в работе, — он же в белую полоску (gen: mix(base, #FFFFFF, .5)) */
.depth-bar { display: flex; height: 10px; margin-top: 12px; border-radius: 5px; overflow: hidden; background: var(--g-tint, var(--tint)); }
.depth-bar > i { display: block; flex: none; height: 100%; }
.depth-done { background: var(--g-base, var(--accent)); }
.depth-work { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0 3px, rgba(255, 255, 255, .5) 3px 6px), var(--g-base, var(--accent)); }
.depth-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.sheet-eb { margin: 16px 0 2px; }
.known, .sheet-steps, .tnodes { list-style: none; margin: 0; padding: 0; }
.known-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.known-row + .known-row, .sheet-step + .sheet-step { box-shadow: 0 -1px 0 var(--line); }
.known-title { font: 500 15px/1.35 var(--fb); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.known-meta { display: flex; align-items: center; gap: 8px; }
.known-meta .ic { width: 13px; height: 13px; }
.known-count { color: var(--muted); font-size: 12px; }
.sheet-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.step-icon { width: 32px; height: 32px; }
.step-icon .ic { width: 16px; height: 16px; }
.step-body { display: flex; flex-direction: column; min-width: 0; }
.step-title { font-size: 14px; line-height: 1.35; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.sheet-step.done .step-title { color: var(--muted); }
.step-sub { color: var(--muted); font-size: 12px; }
.sphere-sheet .pause { margin-top: 16px; text-align: left; }
.seed-sheet .sheet-body { text-align: center; }
.seed-art { display: flex; justify-content: center; }
.seed-img { display: block; width: 150px; height: 110px; }
.seed-name { margin-top: 8px; }
.seed-text { max-width: 330px; margin: 6px auto 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.seed-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.seed-chip .ic { width: 15px; height: 15px; }
.seed-xp { height: 28px; padding: 0 11px; border-radius: 14px; font-size: 13px; }
.seed-sheet .sheet-actions { flex-direction: column; gap: 4px; }
.seed-sheet .sheet-actions > .btn { flex: none; width: 100%; }
/* три чипа семечка в одну строку и на 320 px */
@media (max-width: 374px) {
  .seed-chips { gap: 6px; }
  .seed-chip, .seed-xp { height: 26px; padding: 0 9px 0 7px; font-size: 12px; }
  .seed-chip .ic { width: 13px; height: 13px; }
}
/* тихие кнопки шторки и рассказа — тоже не меньше 44 px в высоту; селекторы сильнее «.btn.q { min-height: 40px }» (M1) */
.sheet-actions > .btn.seed-later, .q-foot .btn, .btn.to-wheel { min-height: 44px; }
/* невысокий экран (640 px и ниже 700): шторка выше, картинка семечка меньше — текст семечка виден без прокрутки; город над
   шторкой — по высоте свободного места (40vh без полей), чтобы станция выбранной сферы оставалась видна (M2) */
@media (max-height: 700px) {
  .sphere-sheet { max-height: 60vh; }
  .seed-img { width: 112px; height: 82px; }
  .wheel-sel .city { width: calc(40vh - 16px); }
}

/* ---------- дерево навыков сферы (макет 3-04; главы на тропе) ---------- */
.sphere-tree { display: flex; flex-direction: column; min-width: 0; }
.tree-head { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.tree-name { flex: 1 1 auto; min-width: 0; }
.tree-title { margin: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.tree-sub { margin: 2px 0 0; color: var(--muted-sky); font-size: 13px; }
.sphere-tree .trail { margin-top: 8px; }
.ch-count { color: var(--muted-sky); font-size: 13px; }
.tn-body { display: flex; flex-direction: column; min-width: 0; }
.tn-title { font: 500 15px/1.35 var(--fb); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.tn-sub { color: var(--muted-sky); font-size: 12.5px; }
.tnode .tn .ic { width: 16px; height: 16px; }
.tnode .tn-done { background: var(--g-base, var(--accent)); box-shadow: none; color: #FFFFFF; }
.tnode .tn-work { background: var(--g-tint, var(--tint)); background: conic-gradient(var(--g-base, var(--accent)) 0 50%, var(--g-tint, var(--tint)) 50% 100%); box-shadow: none; }
.tn-core { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; color: var(--g-deep, var(--accent)); }
.tnode .tn-next { box-shadow: inset 0 0 0 2px var(--g-base, var(--accent)); color: var(--g-deep, var(--accent)); }
button.tmore { display: block; min-height: 44px; margin: 0; border: 0; background: transparent; font: 500 15px/1.3 var(--fb); text-align: left; cursor: pointer; }
button.tmore:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.tree-empty { margin: 0; padding: 4px 0 8px 52px; color: var(--muted-sky); font-size: 14px; }

/* ---------- нижняя панель: парящая капсула ---------- */
.tabbar {
  position: fixed; z-index: 10; display: flex; justify-content: space-around; height: var(--nav-h); max-width: 448px; margin: 0 auto; padding: 7px 6px 0;
  /* запас для WebView без max() (Chrome < 79): капсула во всю ширину с полями 16 px, как без выреза экрана */
  left: 16px; right: 16px;
  left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
  bottom: calc(var(--nav-gap) + env(safe-area-inset-bottom));
  border-radius: 31px; background: var(--tabbar); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--glass-edge), var(--sh-tab);
}
.tabbar[hidden] { display: none; }
.tab {
  position: relative; flex: 1 1 0; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted);
  font: 500 11px/1.1 var(--fb); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* значок — SVG-пиктограмма V2 в currentColor, без фильтров и прозрачности: у неактивной вкладки он цвета подписи (--muted) */
.tab-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 28px; border-radius: 14px; }
.tab-icon .ic { width: 22px; height: 22px; }
.tab.active { color: var(--ink); }
/* активная вкладка: белый значок на «таблетке» цвета акцента, подпись цвета текста */
.tab.active .tab-icon { color: #FFFFFF; background: var(--accent); }
/* экраны ответа и рассказа: капсулы нет, запас под неё внизу страницы не нужен */
.panel.no-tabbar { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* стекло без размытия (старый WebView): плотный белый вместо полупрозрачного */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .card, .loading, .tabbar { background: rgba(255, 255, 255, .94); }
  .sheet { background: #FFFFFF; }
}

/* ---------- движение: только когда оно не отключено в системе ---------- */
@media (prefers-reduced-motion: no-preference) {
  .anim-grow { animation: grow 1.4s cubic-bezier(.2, .8, .2, 1) both; }
  .anim-pop { animation: pop .9s .6s cubic-bezier(.2, 1.4, .4, 1) both; }
  .anim-bar > i, .anim-bar > .bar-fill { animation: barfill 1.2s .4s cubic-bezier(.2, .8, .2, 1) both; }
  .anim-rise { animation: rise .7s .1s ease-out both; }
  .sun-halo { animation: sun-glow 3.6s ease-in-out infinite; }
  .skel { animation: skel-pulse 1.3s ease-in-out infinite; }
  .recdot { animation: rec-pulse 1.2s ease-in-out infinite; }
  .toast { transition: opacity .2s, transform .2s; }
  .group-sum::after { transition: transform .15s; }
  .block-grow { animation: block-grow 1.4s cubic-bezier(.2, .8, .2, 1) both; }
  /* живая волна записи (D17): столбики дышат по очереди; без движения волна просто стоит */
  .rec-wave .wv { transform-box: fill-box; transform-origin: center; animation: wave 1.1s ease-in-out infinite; }
  .rec-wave .wv1 { animation-delay: .18s; }
  .rec-wave .wv2 { animation-delay: .36s; }
  @keyframes wave { 50% { transform: scaleY(.55); } }
  @keyframes block-grow { from { transform: scale(.6); opacity: .35; } to { transform: none; opacity: 1; } }
  @keyframes grow { from { r: 50px; } to { r: 200px; } }
  @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.7); } to { opacity: 1; transform: none; } }
  @keyframes barfill { from { width: var(--from); } to { width: var(--to); } }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes sun-glow { 50% { opacity: .25; } }
  @keyframes skel-pulse { 50% { opacity: .45; } }
  @keyframes rec-pulse { 50% { opacity: .35; } }
}

/* ---------- «Сегодня» (макеты 2-01, 1-04, 6-07 V2) ---------- */
.today { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* приветствие и дата прямо на небе, справа — дуга дня */
.today-head { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 4px; }
.today-hello { flex: 1 1 auto; min-width: 0; }
.today-greeting { margin: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.today-date, .today-first { margin: 6px 0 0; font-size: 14px; line-height: 1.42; color: var(--muted-sky); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.today-first { display: flex; align-items: flex-start; gap: 6px; }
.today-first .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--deco-ink); }
.sun-dial { display: block; flex: none; margin-top: 2px; overflow: visible; }
.sun-time { font: 500 9.6px/1 var(--fh); }
/* задача дня: орбиты в углу, текст крупно, одна главная кнопка и тихая «Отметить без ответа» */
.now-card { overflow: hidden; }
.now-orbits { position: absolute; right: -48px; top: -56px; width: 150px; height: 150px; pointer-events: none; }
/* длинное имя сферы не помещается рядом с меткой — чип уходит под неё целиком, имя не режется (m2 ревью Задачи 10) */
.now-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 28px; }
.now-eb { flex: 1 0 auto; min-width: 0; margin: 0; white-space: nowrap; }
.now-eb .ic { width: 16px; height: 16px; color: #B9822A; }
.now-head .sphere-chip { max-width: 100%; }
.now-text { position: relative; margin: 10px 0 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.now-empty { position: relative; margin: 10px 0 0; }
.now-card .task-actions { position: relative; gap: 4px; margin-top: 16px; }
.now-card .task-actions .btn { width: 100%; }
.now-card .btn-link { min-height: 44px; color: var(--accent); font-size: 16px; font-weight: 500; text-decoration: none; }
.now-card .task-foot { position: relative; margin-top: 14px; }
/* капсула героя: бюст в кольце опыта, уровень и опыт, дни внимания */
.hero-cap { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.xp-ring { position: relative; flex: none; width: 56px; height: 56px; }
.xp-ring-svg { position: absolute; left: 0; top: 0; }
.xp-bust { position: absolute; left: 6px; top: 6px; width: 44px; height: 44px; border-radius: 50%; background: #E3F1EA; object-fit: cover; }
.cap-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.cap-level .num { font-size: 16px; }
.cap-xp { font-size: 12px; line-height: 1.35; color: var(--muted); }
.cap-xp .num { font-size: 12.5px; color: var(--ink); }
.days-num { display: flex; align-items: center; gap: 4px; color: var(--accent); }
.days-num .ic { width: 16px; height: 16px; }
.days-num .stat { color: var(--ink); }
.days-label { display: block; max-width: 72px; margin-top: 2px; font-size: 12px; line-height: 1.2; color: var(--muted); text-align: center; }
/* «Сфера дня» и мини-город в одном ряду; на паузе колесо одно */
.today-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.today-pair.single { grid-template-columns: minmax(0, 1fr); }
.sphere-day { display: flex; flex-direction: column; min-height: 176px; padding: 14px; }
.sphere-day .eb, .wheel-card .eb { margin: 0; }
/* имя рядом со станцией; не помещается его самое длинное слово — имя уходит под станцию целиком (слово не режется) */
.sod-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px -8px 0 0; }
.sod-name { flex: 1 1 0; min-width: min-content; font-size: 16px; overflow-wrap: break-word; word-break: normal; }
.sod-reason { flex: 1 1 auto; margin: 8px 0 0; font-size: 13px; line-height: 1.38; color: var(--muted); }
.sod-btn { width: 100%; margin-top: 10px; }
.sphere-day .btn.sod-btn { min-height: 44px; padding-left: 8px; padding-right: 8px; overflow-wrap: normal; word-break: normal; }
.wheel-card { display: flex; flex-direction: column; align-items: center; min-height: 176px; padding: 12px 10px 8px; color: inherit;
  text-decoration: none; -webkit-tap-highlight-color: transparent; }
.wheel-card-head { align-self: stretch; justify-content: space-between; padding-left: 4px; }
.wheel-card-head .ic { width: 16px; height: 16px; }
.wheel-card-city { display: flex; justify-content: center; width: 100%; margin-top: 4px; }
.wheel-card .city { width: 130px; }
.hero-cap:focus-visible, .wheel-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 374px) {
  .hero-cap { gap: 10px; padding-right: 12px; }
  .cap-level { font-size: 14.5px; }
  .days { padding-left: 10px; }
  .days-label { max-width: 60px; }
}

/* «Что нового»: тонкая полоска 38 px над вкладкой — значок, строка (нажатие раскрывает полный текст) и ✕ */
.notice { border-radius: 14px; background: var(--deco-soft); color: var(--ink); }
.notice-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding-left: 12px; }
.notice-spark { width: 17px; height: 17px; color: var(--deco-ink); }
/* строка — кнопка во всю высоту полоски; место нажатия — 44 px (невидимое продолжение вверх и вниз) */
.notice-more {
  position: relative; display: flex; align-items: center; align-self: stretch; flex: 1 1 auto; min-width: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink); font: 400 13px/1.3 var(--fb); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.notice-more::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
.notice-short { display: block; }
.notice-lead { font-weight: 500; }
.notice-x { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -3px 0; padding: 0;
  border: 0; border-radius: 14px; background: transparent; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.notice-x .ic { width: 16px; height: 16px; }
.notice-full { padding: 2px 12px 12px 37px; }
.notice-text { margin: 0 0 10px; font-size: 14px; line-height: 1.45; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.notice-ok.btn-sm { min-height: 44px; }
.notice-more:focus-visible, .notice-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }

/* ---------- «Что тебя ждёт» (макет 1-01 V2): до оценки профиля, одинаково для всех ---------- */
.preview { display: flex; flex-direction: column; min-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.preview-art { position: relative; height: 244px; margin-top: 6px; padding: 0; overflow: hidden; }
.preview-city { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.preview-hero { position: absolute; left: 44px; top: 42px; width: 150px; height: 188px; }
.preview-wheel { position: absolute; right: 20px; top: 18px; display: flex; flex-direction: column; align-items: center; }
.preview-disc { display: block; border-radius: 50%; background: #FFFFFF; box-shadow: var(--sh); }
.preview-disc .city { display: block; width: 132px; }
.preview-badge { position: relative; margin-top: -12px; }
.preview-title { margin: 20px 0 0; }
.preview-lead { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted-sky); }
.preview-points { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.preview-point { display: flex; align-items: flex-start; gap: 12px; }
.preview-text { margin: 0; padding-top: 8px; font-size: 15px; line-height: 1.45; }
.preview-foot { margin-top: auto; padding-top: 24px; }
.preview-note { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 1.38; color: var(--muted-sky); }
.preview-note span { display: block; }
/* узкий экран: героиня меньше и левее, пример колеса меньше — они не заходят друг на друга */
@media (max-width: 374px) {
  .preview-hero { left: 8px; top: 74px; width: 124px; height: 155px; }
  .preview-wheel { right: 12px; }
  .preview-disc .city { width: 112px; }
}
/* невысокий экран: картинка ниже, чтобы «Открыть чат с ботом» было ближе */
@media (max-height: 700px) {
  .preview-art { height: 204px; }
  .preview-hero { top: 36px; width: 128px; height: 160px; }
  .preview-title { margin-top: 16px; }
  .preview-points { gap: 10px; }
}

/* тост, заглушки */
.placeholder { text-align: center; padding: 40px 16px; }
.standalone { margin-top: 30vh; text-align: center; font-size: 18px; }
.standalone p { margin: 0; }

/* ---------- спокойные состояния (макеты 6-01, 6-03, 6-04, 6-05) ---------- */
/* загрузка: скелет «Сегодня» — приветствие и дуга дня, задача дня, капсула героя, две карточки, орбиты города */
.day-skel { display: flex; flex-direction: column; gap: 12px; }
.day-skel .skel { margin: 0; }
.skel-head { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.skel-head-text { flex: 1 1 auto; min-width: 0; }
.day-skel .skel-title { width: 78%; height: 26px; border-radius: 13px; }
.day-skel .skel-date { width: 44%; margin-top: 10px; }
.day-skel .skel-dial { flex: none; width: 66px; height: 39px; border-radius: 20px; }
.day-skel .skel-eb { width: 38%; height: 12px; border-radius: 6px; }
.day-skel .skel-line { height: 18px; border-radius: 9px; margin-top: 16px; }
.day-skel .skel-line + .skel-line { margin-top: 8px; }
.day-skel .skel-short { width: 86%; }
.day-skel .skel-btn { height: 52px; border-radius: 26px; margin-top: 20px; }
.day-skel .skel-foot { width: 44%; margin: 16px auto 4px; }
.skel-cap { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; }
.day-skel .skel-avatar { flex: none; width: 56px; height: 56px; border-radius: 28px; }
.skel-cap-text { flex: 1 1 auto; min-width: 0; }
.day-skel .skel-name { width: 60%; }
.day-skel .skel-sub { width: 45%; height: 10px; border-radius: 5px; margin-top: 10px; }
.skel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skel-small { height: 150px; }
.day-skel .skel-small .skel-eb { width: 50%; }
.day-skel .skel-mid { width: 70%; height: 16px; border-radius: 8px; margin-top: 16px; }
.skel-city { display: flex; align-items: center; justify-content: center; }
.skel-orbits { display: block; }
/* текст прямо на небе */
.loading-text { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; color: var(--muted-sky); font-size: 13px; }
.loading-text .ic { width: 16px; height: 16px; color: var(--accent); }
/* загрузка внутри экрана (сфера, задание): только строки */
.loading-screen .skel-btn { height: 44px; border-radius: 22px; margin-top: 14px; }

/* отказ: стеклянная карточка, янтарное облако при «Нет связи» (красного нет), «Повторить» под карточкой */
.calm { display: flex; flex-direction: column; gap: 16px; }
.calm-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; }
.calm-icon { width: 64px; height: 64px; background: var(--tint); }
.calm-icon.tone-amber { background: var(--amber-tint); color: var(--amber-ink); }
.calm-icon .ic { width: 30px; height: 30px; }
.calm-title { margin: 16px 0 0; }
.calm-text { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.calm-retry { width: 100%; }

/* «Открыть чат…» и подсказка, когда приложение закрыть нечем */
.open-chat-box { display: flex; flex-direction: column; gap: 10px; }
.open-chat { width: 100%; }
.open-chat-hint { margin: 0; text-align: center; color: var(--muted-sky); font-size: 14px; }

/* «Данных пока нет»: семечко в орбитах на небе, кнопка внизу */
.nodata {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 72px;
  min-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.nodata-art { position: relative; width: 200px; height: 146px; }
.nodata-orbits { position: absolute; left: -30px; top: -38px; width: 260px; height: 200px; }
.nodata-seed { position: relative; display: block; width: 200px; height: 146px; }
.nodata-title { margin: 16px 0 0; }
.nodata-text { max-width: 290px; margin: 8px 0 0; color: var(--muted-sky); font-size: 15px; line-height: 1.45; }
.nodata .open-chat-box { width: 100%; margin-top: auto; padding-top: 24px; }

/* карточка паузы: спокойно, текст safety.py, 112 и линия помощи в мягкой плашке, «Открыть чат» под карточкой */
.pause { display: flex; flex-direction: column; gap: 16px; }
.pause-card { padding: 22px 20px; }
.pause-icon { width: 56px; height: 56px; background: var(--tint); }
.pause-icon .ic { width: 28px; height: 28px; }
.pause-title { margin: 16px 0 0; }
.pause-text { margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
.pause-text + .pause-text { margin-top: 12px; }
.pause-lines { margin-top: 16px; padding: 4px 14px; border-radius: 16px; background: var(--soft); }
.pause-lines .ic { color: var(--accent); }
.pause-num { flex: 1 1 auto; }
.pause-label { color: var(--muted); font-size: 13px; }
.pause-help { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pause-help-text { color: var(--muted); font-size: 12px; line-height: 1.35; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.pause-resume { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.42; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--nav-gap) + 14px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px); width: max-content; max-width: min(90vw, 420px); padding: 12px 16px; border-radius: 22px;
  white-space: pre-line; text-align: left; line-height: 1.4; font: 500 14px/1.4 var(--fb);
  background: var(--ink); color: #FFFFFF; box-shadow: var(--sh-lg); opacity: 0; pointer-events: none; z-index: 40;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* без капсулы (экраны ответа и рассказа, «закрыто», «Данных пока нет») тост опускается к низу экрана (#toast идёт за #panel) */
.panel.no-tabbar + .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }

/* общее: группы-<details>, формы */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.group-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.group-sum::after { content: "▾"; color: var(--muted); flex: none; }
details:not([open]) > .group-sum::after { transform: rotate(-90deg); }
.group-sum > span:first-child { flex: 1 1 auto; min-width: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.group-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.input {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 16px; border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, .82); color: var(--ink); font: inherit; font-size: 16px;
}
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select.input { appearance: none; -webkit-appearance: none; }
/* отказ формы: янтарь, не красный (красного в облике нет, кроме точки записи) */
.form-error { margin: 0 0 12px; padding: 8px 12px; border-radius: 16px; background: var(--amber-tint); border: 1px solid var(--amber-line); color: var(--amber-ink); }
.input[aria-invalid="true"] { border: 1.5px solid var(--amber-line); }
.form-error[hidden] { display: none; }

/* навыки */
.skill-row { padding: 10px 0; border-top: 1px solid var(--line); }
.skill-row:first-of-type { border-top: 0; padding-top: 0; }
.skill-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.skill-title { font-size: 17px; font-weight: 500; min-width: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.rank-bar { display: flex; gap: 4px; }
.rank-seg { width: 100%; max-width: 28px; flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); }
.rank-seg.on { background: var(--accent); border-color: var(--accent); }

/* выводы на экране характеристики (#attr) */
.items { display: flex; flex-direction: column; }
.item { padding: 12px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; padding-top: 4px; }
.item:last-child { padding-bottom: 0; }
.item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item-title { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 500; line-height: 1.3; }
.item-meta { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.more { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.disclaimer { font-size: 13px; text-align: center; padding: 0 4px; }

/* задачи и «Цели и покупки» до Задачи 12 (goals.js рисует внутри .tasks) */
.tasks { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tasks .btn { width: 100%; }
.tasks .muted + .btn { margin-top: 8px; }
.task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.task-label { background: var(--soft); color: var(--muted); }
.task-sphere { font-size: 13px; color: var(--muted); min-width: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.task-text { margin: 0 0 14px; font-size: 17px; line-height: 1.4; }
.task-card.done .task-text { color: var(--muted); }
.task-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-foot .btn { width: auto; flex: none; padding-left: 18px; padding-right: 18px; }
.task-done { color: var(--accent); font-weight: 500; }


/* интервью по сфере и проверка микрофона */
.sphere, .mic-check { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sphere-card .card-head { align-items: flex-start; flex-wrap: wrap; }
.sphere-card .card-title { min-width: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.sphere-intro { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.sphere-question { margin: 0 0 14px; font-size: 18px; line-height: 1.4; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.answer-input { display: block; min-height: 132px; margin: 0 0 12px; resize: vertical; line-height: 1.4; }
.sphere-actions { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.sphere-actions .btn { width: 100%; }
.mic-note, .privacy { font-size: 13px; line-height: 1.4; }
.mic-note { margin: 0 0 10px; }
.privacy { margin: 0 0 4px; }
.processing { margin: 8px 0 0; font-size: 14px; }
.processing[hidden], .form-error[hidden] { display: none; }
.heard-title { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.rec-line { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.rec-status { margin: 0 0 14px; font-size: 17px; font-variant-numeric: tabular-nums; }
.rec-line .rec-status { margin: 0; }
.crisis-text { margin: 0 0 12px; font-size: 17px; line-height: 1.45; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.crisis-text:last-child { margin-bottom: 0; }
.step-list { list-style: none; margin: 0; padding: 0; }
.step { padding: 10px 0; border-top: 1px solid var(--line); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.step:first-child { border-top: 0; padding-top: 0; }
.step.done { color: var(--muted); }
.q-row { padding: 12px 0; border-top: 1px solid var(--line); }
.q-row:first-of-type { border-top: 0; padding-top: 0; }
.q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.q-state { font-size: 13px; color: var(--muted); }
.q-text { margin: 0 0 10px; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.q-row .btn { width: 100%; }

/* ---------- рассказ о сфере: вопрос (макет 3-06) и «Сфера рассказана» (макет 3-07) ---------- */
.sphere-q { display: flex; flex-direction: column; min-width: 0; }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sphere-chip { max-width: 72%; min-width: 0; margin: 0; background: var(--g-tint, var(--tint)); }
.sphere-chip span { overflow: hidden; text-overflow: ellipsis; }
.sphere-chip .ic { width: 15px; height: 15px; color: var(--g-deep, var(--accent)); }
.q-count { flex: none; color: var(--muted-sky); font-size: 13px; }
.q-steps { display: flex; gap: 6px; margin-top: 10px; }
.q-steps > i { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--tint); }
.q-steps > i.on { background: var(--accent); }
.sphere-q .qt { margin: 20px 0 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.sphere-q .sphere-intro { margin: 16px 0 0; padding: 12px 14px; border-radius: 22px; font-size: 14px; line-height: 1.4; color: var(--ink); }
/* текст прямо на небе — вторичным цветом неба */
.sphere-q .note { color: var(--muted-sky); }
.sphere-q .note.privacy { margin: 8px 0 0; }
.sphere-q .note.mic-note, .sphere-q .note.reanswer-note { margin: 12px 0 0; font-size: 13px; }
.sphere-q .form-error { margin: 12px 0 0; }
.sphere-q .answer-input { margin: 20px 0 12px; }
.sphere-q .sphere-actions { margin: 0; }
.mic-zone { display: flex; flex-direction: column; align-items: center; margin-top: 14px; }
/* кнопка — круг 112 px с кольцами и подпись под ним */
.mic-btn {
  display: flex; flex-direction: column; align-items: center; padding: 30px 30px 0; border: 0; border-radius: 24px; background: transparent;
  color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mic-btn:disabled { opacity: .5; cursor: default; }
.mic-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mic-btn .mic-big .ic { width: 44px; height: 44px; }
.mic-title { margin-top: 44px; }
.mic-sub { margin: 4px 0 0; color: var(--muted-sky); font-size: 14px; }
.q-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.q-foot .btn, .sphere-q .sphere-actions .btn { width: 100%; }
/* голос в чате при работающей записи — запасной путь: тише и мельче «Пропустить вопрос» (M8) */
.q-foot .q-chat { font-size: 14px; color: var(--muted-sky); }
/* свой «Назад» там, где у Telegram его нет (M9): тихая строка над чипом сферы, место нажатия 44 px */
.q-back {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 44px; margin: -6px 0 -4px -6px; padding: 0 10px 0 4px;
  border: 0; border-radius: 22px; background: transparent; color: var(--accent); font: 500 15px/1 var(--fb); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.q-back .ic { width: 20px; height: 20px; }
.q-back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sphere-q .rec-line { margin: 24px 0 14px; }
.sphere-q .rec-status { margin-top: 20px; }
.sphere-q .heard-title { margin: 20px 0 6px; color: var(--muted-sky); }
.to-wheel { width: 100%; }
.told { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.told-xp { height: 34px; margin-top: 2px; padding: 0 14px 0 10px; border-radius: 17px; font-size: 16px; box-shadow: var(--sh); }
.told-xp .ic { width: 18px; height: 18px; }
.told-title { margin: 16px 0 0; }
.told-line { max-width: 310px; margin: 8px 0 0; color: var(--muted-sky); font-size: 15px; line-height: 1.45; }
.told-line[hidden] { display: none; }
.told-mean-row { margin: 12px 0 0; }
.told-steps { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px 14px; text-align: left; font-size: 14px; }
.told-wheel { width: 100%; margin-top: 24px; }
.mic-support { margin: 0 0 10px; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.mic-report { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.mic-check .btn { width: 100%; margin-bottom: 10px; }
.mic-check-title { margin: 8px 0 0; }
.mic-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mic-check-icon { width: 72px; height: 72px; margin: 12px 0 22px;
  box-shadow: 0 0 0 10px rgba(55, 115, 90, .1), 0 14px 24px -12px rgba(55, 115, 90, .7); }
.mic-check-icon .ic { width: 30px; height: 30px; }
.mic-card .mic-support { color: var(--muted); font-size: 14px; }
.mic-card .mic-report { align-self: stretch; text-align: left; }
.mic-card .btn { margin: 4px 0 0; }
.mic-check-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* экран характеристики */
.attr-detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.attr-big { flex: none; font: 500 20px/1.2 var(--fh); font-variant-numeric: tabular-nums; color: var(--accent); }
.attr-big.low { font: 400 14px/1.4 var(--fb); color: var(--muted); }
.attr-detail .bar { margin-top: 8px; }
.attr-detail .item-meta { margin-top: 10px; }
.attr-detail .formula { margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
.attr-detail .step { display: flex; flex-direction: column; gap: 2px; }

/* значок опыта у шагов к целям (goals.js) */
.xp-badge { background: var(--deco-soft); color: var(--xp-ink); }

@media (max-width: 360px) {
  .card { padding: 14px; }
  .item-head { flex-direction: column; gap: 6px; }
}

/* Этап 0.8: ответ на задание, «Отметить без ответа», пояснение «Зачем это и как сделать», задания-сборы */
.task-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.task-answer { margin: -6px 0 12px; font-size: 14px; line-height: 1.4; color: var(--accent); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.task-answer.waiting { color: var(--amber-ink); }
.task-actions { display: flex; flex-direction: column; gap: 6px; }
.task-foot + .task-actions { margin-top: 10px; }
.explain { margin: 0 0 12px; }
.tasks .explain-toggle, .explain-toggle {
  width: 100%; min-height: 40px; padding: 6px 0; text-align: left; color: var(--accent); font-size: 15px;
}
.explain-toggle::after { content: " ▾"; }
.explain-toggle[aria-expanded="false"]::after { content: " ▸"; }
.explain-body { margin-top: 4px; padding: 12px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.explain-body[hidden] { display: none; }
/* «Зачем это» и «Как сделать» (макет 4-02 V2): метки заглавными, шаги с номером-кружком .kbd */
.explain-title { margin: 0 0 6px; }
.explain-text { margin: 0 0 16px; font-size: 15px; line-height: 1.45; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.explain-text:last-child { margin-bottom: 0; }
.explain-steps { list-style: none; margin: 0; padding: 0; }
.explain-step { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; font-size: 15px; line-height: 1.45; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.explain-step:first-child { margin-top: 0; }
.explain-step .kbd { margin-top: 1px; }
.explain-step-text { flex: 1 1 auto; min-width: 0; }
/* страница задания: пояснение — сама стеклянная карточка, без своей подложки */
.explain-page { margin: 0; padding: 18px 16px; }
.explain-page .explain-body { margin: 0; padding: 0; border: 0; background: transparent; }
.explain-listen { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.explain-listen .btn { width: 100%; }
.task-tags + .task-sphere { margin-left: auto; }

/* Этап 0.8: экран ответа на задание (#task/<ссылка>) и форма строк задания-сбора */
.task-kicker { margin: 0 0 4px; font-size: 13px; line-height: 1.4; color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.task-title { margin: 0 0 12px; font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: normal; text-transform: none;
  color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.task-saved { margin: 0 0 6px; font-size: 17px; line-height: 1.4; color: var(--accent); }
.rows-hint { margin: 0 0 12px; font-size: 14px; line-height: 1.4; }
.rows-form { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; }
.rows-list { display: flex; flex-direction: column; gap: 12px; }
/* строка проверки (макет 4-03 V2): стеклянная карточка, название с точечной чертой, корзина справа, два поля-рамки */
.row-item {
  position: relative; min-width: 0; padding: 12px 16px 16px; background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-radius: var(--radius); box-shadow: var(--glass-edge), var(--sh);
}
.row-item.row-bad { box-shadow: var(--glass-edge), 0 0 0 1.5px var(--amber-line), var(--sh); }
/* страница проверки строк (макет 4-03): заголовок и подсказка на небе, карточки строк без общей рамки */
.card.rows-card { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rows-card .task-title { margin: 8px 0 0; font: 500 22px/1.25 var(--fb); font-family: var(--fh); letter-spacing: -.01em; }
.rows-card .muted { color: var(--muted-sky); }
.rows-card .task-kicker { margin: 8px 0 0; font-size: 14px; color: var(--muted-sky); }
.rows-card .rows-hint { margin: 8px 0 16px; font-size: 15px; line-height: 1.45; }
.rows-card .sphere-actions { margin-top: 12px; }
.row-top { display: flex; align-items: center; gap: 8px; margin: 0 -8px 4px 0; }
.row-title { display: block; flex: 1 1 auto; min-width: 0; }
.row-title .input.row-title-input {
  display: block; min-height: 44px; padding: 8px 0 4px; border: 0; border-bottom: 2px dotted rgba(37, 51, 43, .3); border-radius: 0;
  background: transparent; font: 500 20px/1.3 var(--fb); color: var(--ink);
}
.row-title .input.row-title-input:focus-visible { outline: none; border-bottom: 2px solid var(--accent); }
.row-title.field-bad .input.row-title-input, .row-title .input.row-title-input[aria-invalid="true"] { border-bottom: 2px solid var(--amber-line); }
/* корзина: значок 22 px в круглой кнопке 44 px (место нажатия), подпись «Удалить» только для читалки */
.row-delete {
  display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.row-delete .ic { width: 22px; height: 22px; }
.row-delete:disabled { opacity: .5; cursor: default; }
.row-delete:focus-visible, .rows-add:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.row-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.row-item .field { position: relative; margin-bottom: 0; min-width: 0; }
.row-item .field .input { width: 100%; min-height: 28px; font: 500 17px/1.3 var(--fb); color: var(--ink); }
.row-item .field.field-bad { background: var(--amber-tint); box-shadow: inset 0 0 0 1.5px var(--amber-line); }
.field .input[aria-invalid="true"] { border: 0; }
/* «допиши» на пустом поле из разбора: накрывает строку ввода, пока поле не в фокусе (подсказка — не значение поля) */
.field-ask {
  position: absolute; left: 12px; right: 12px; top: 25px; bottom: 8px; display: flex; align-items: center; background: var(--amber-tint);
  font: 500 18px/1.2 var(--fb); color: var(--amber-ink); pointer-events: none;
}
.field-ask[hidden], .field:focus-within .field-ask { display: none; }
.field-missing .field-label { color: var(--amber-ink); }
.row-missing-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--amber-ink); }
.row-missing-note .ic { margin-top: 1px; color: var(--amber-ink); }
.row-missing-note[hidden] { display: none; }
.rows-add, .rows-card .btn-quiet, .goals .explain-toggle { min-height: 44px; }
.rows-add { justify-content: flex-start; width: 100%; gap: 8px; padding-left: 6px; }
.rows-add[hidden] { display: none; }
input[type="date"].input { display: block; min-width: 0; -webkit-appearance: none; appearance: none; }
@media (max-width: 340px) {
  .row-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- «Задачи» (макет 4-01 V2, D19): «Сейчас», «Дальше», сборы, «Цели и покупки», «Сделано» ---------- */
.tasks-head { margin: 8px 0 0; }
.tasks-title { margin: 0; }
.tasks-lead { margin: 4px 0 0; font-size: 14px; line-height: 1.42; color: var(--muted-sky); }
.tasks-state .btn { margin-top: 8px; }
.tasks .btn-sm { width: auto; flex: none; min-height: 44px; }
/* «Сейчас»: одно главное действие и тихая отметка (как задача дня на «Сегодня»; шапка с чипом — общая .now-head) */
.now-task .now-text { display: block; margin: 10px 0 0; color: var(--ink); text-decoration: none; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent; }
.now-task .task-answer { margin: 8px 0 0; }
.now-task .task-actions { gap: 4px; margin-top: 16px; }
.now-task .btn-link { min-height: 44px; color: var(--accent); font-size: 16px; font-weight: 500; text-decoration: none; }
/* «Дальше · ещё N»: метка прямо на небе, тихие строки в одной карточке */
.tasks .next-eb { margin: 4px 0 -4px; padding: 0 2px; color: var(--muted-sky); }
.next-card { padding: 2px 14px; }
.next-list { list-style: none; margin: 0; padding: 0; }
.next-row + .next-row { box-shadow: 0 -1px 0 var(--line); }
.next-link, .next-row.plain { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; }
.next-link { color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.row-badge { display: flex; flex: none; }
.row-ibox { width: 34px; height: 34px; }
.row-ibox .ic { width: 18px; height: 18px; }
.next-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.next-text { font-size: 14px; line-height: 1.4; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.next-body .task-answer { margin: 0; font-size: 12.5px; line-height: 1.35; }
.next-chev, .goals-chev, .explain-row-chev { flex: none; width: 18px; height: 18px; color: var(--muted); }
.next-chev { width: 16px; height: 16px; }
.tasks .next-more { min-height: 44px; margin: 2px 0 6px; }
/* задание-сбор: значок, «Задание-сбор · k из n», текст и «Ответить» под ним */
.collect-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.collect-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 auto; min-width: 0; }
.collect-eb { margin: 0; font-size: 12px; line-height: 1.3; color: var(--muted); }
.collect-text { color: var(--ink); text-decoration: none; font: 500 14.5px/1.4 var(--fb); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.collect-body .task-answer { margin: 4px 0 0; font-size: 13px; }
.collect-body .btn { margin-top: 8px; }
/* «Цели и покупки»: сумма набрана Unbounded */
.goals-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.goals-link-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.goals-link-sum { font-size: 13px; line-height: 1.35; color: var(--muted); }
.goals-link-sum .num { color: var(--ink); }
/* «Сделано · N»: свёрнуто; строки с «Вернуть» */
.done-fold { padding: 4px 16px; }
.done-list { list-style: none; margin: 0; padding: 0 0 6px; }
.done-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 0; }
.done-row + .done-row { box-shadow: 0 -1px 0 var(--line); }
.done-text { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
/* выполненный сбор в «Сделано» (хотфикс 0.9.1): текст и под ним строка ответа, без отметки */
.done-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; padding: 6px 0; }
.done-body .task-answer { margin: 0; font-size: 12.5px; line-height: 1.35; }
.now-text:focus-visible, .next-link:focus-visible, .collect-text:focus-visible, .goals-link:focus-visible, a.done-text:focus-visible,
.explain-row:focus-visible, .rec-stop-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }

/* ---------- «Задание: зачем и как» (#info, макет 4-02 V2) ---------- */
/* экран без нижней панели: кнопки внизу экрана */
.task-info { display: flex; flex-direction: column; gap: 14px; min-width: 0;
  min-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.info-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.info-tags .sphere-chip, .task-top .sphere-chip { max-width: 100%; }
.info-xp { height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; }
.info-text { margin: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.task-info .task-answer { margin: -4px 0 0; }
.info-foot { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 12px; }
.info-foot .btn { width: 100%; }
.info-foot .btn-link { min-height: 44px; color: var(--accent); font-size: 16px; font-weight: 500; text-decoration: none; }
h1[tabindex="-1"]:focus { outline: none; }
.info-text[tabindex="-1"]:focus, .heard-title[tabindex="-1"]:focus, .done-title[tabindex="-1"]:focus, .task-title[tabindex="-1"]:focus,
.calm-title[tabindex="-1"]:focus { outline: none; }

/* ---------- ответ на задание (#task): вопрос 2-02, запись 2-03, «Я услышал» 2-04, «Готово» 2-05, 6-02 ---------- */
.task-q { min-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.task-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; }
.q-eb { color: var(--muted-sky); }
.task-q .task-title { margin: 12px 0 0; letter-spacing: -.005em; }
.task-q .task-title.qt { font: 500 20px/1.36 var(--fb); }
.task-q .task-title.h4 { font: 500 15.5px/1.42 var(--fb); }
.explain-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.explain-row-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.explain-row-sub { font-size: 13px; color: var(--muted); }
.task-q .processing { margin: 10px 0 0; color: var(--muted-sky); }
.task-q .mic-zone { margin-top: 28px; }
.task-q .q-foot { margin-top: auto; padding-top: 24px; }
.task-q .note.privacy { margin: 12px 0 0; }
/* запись: точка и «Идёт запись», таймер, волна, круг «Готово» с кольцом прогресса */
.rec-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; font-size: 14px; font-weight: 500; }
.rec-timer { margin: 8px 0 0; text-align: center; white-space: nowrap; }
.rec-time { font-size: 52px; line-height: 1.05; letter-spacing: -1px; }
.rec-max { margin-left: 6px; font-size: 22px; color: var(--muted-sky); }
.rec-wave { display: block; max-width: 100%; height: auto; margin: 22px auto 0; }
.rec-stop-btn { display: flex; flex-direction: column; align-items: center; align-self: center; margin-top: 30px; padding: 10px 10px 0;
  border: 0; border-radius: 24px; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rec-stop-btn:disabled { opacity: .5; cursor: default; }
.rec-stop { position: relative; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%;
  background: #FFFFFF; box-shadow: var(--sh); }
.rec-ring-box { position: absolute; left: -10px; top: -10px; width: 132px; height: 132px; }
.rec-ring { display: block; }
.rec-square { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); }
.rec-stop-label { margin-top: 16px; }
.rec-stop-sub { margin: 0; text-align: center; font-size: 13px; color: var(--muted-sky); }
.rec-foot { margin-top: auto; padding-top: 24px; }
.rec-foot .btn { width: 100%; min-height: 44px; }
.task-rec .rec-status { margin: 32px 0 0; text-align: center; }
/* «Я услышал»: метка, расшифровка в карточке (правится прямо в поле), подсказка, «Записать заново» и «Верно» */
.task-heard .heard-title { margin: 8px 0 0; color: var(--muted-sky); }
.heard-title .ic { width: 18px; height: 18px; }
.heard-card { margin-top: 12px; padding: 14px; }
.heard-card .heard-input { display: block; min-height: 168px; margin: 0; padding: 4px; border: 0; background: transparent; font-size: 17.5px;
  line-height: 1.6; resize: vertical; }
.heard-note { margin: 12px 0 0; color: var(--muted-sky); }
.heard-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
.heard-actions > .btn { flex: 1 1 0; min-width: 0; gap: 6px; padding-left: 8px; padding-right: 8px; font-size: 15px; white-space: nowrap; }
.heard-cancel { width: 100%; min-height: 44px; margin-top: 4px; }
/* уже 375 px: обе подписи в строку без значков */
@media (max-width: 374px) {
  .heard-actions > .btn .ic { display: none; }
}
/* «Готово»: герой в круглом окне на город (по колено), «+5 опыта» под кругом, уровень и день внимания */
.done-screen { display: flex; flex-direction: column; align-items: center; min-width: 0; padding-top: 20px; text-align: center;
  min-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.done-art { position: relative; flex: none; width: 220px; height: 220px; }
.done-window { position: absolute; left: 0; top: 0; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; background: #E3F1F1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.done-city { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.done-hero-box { position: absolute; left: 22px; bottom: 0; width: 176px; height: 220px; border-radius: 0 0 88px 88px; overflow: hidden; }
.done-hero { position: absolute; left: -47px; top: -7px; width: 271px; height: 339px; max-width: none; }
.done-hero-box.neutral .done-hero { left: 48px; top: 70px; width: 80px; height: 80px; }
.done-spark { position: absolute; left: 4px; top: 56px; width: 18px; height: 18px; color: var(--deco); }
.done-xp { position: relative; height: 34px; margin-top: -14px; padding: 0 14px 0 10px; border-radius: 17px; font-size: 16px; box-shadow: var(--sh); }
.done-xp .ic { width: 18px; height: 18px; }
.done-title { margin: 16px 0 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.done-note { max-width: 300px; margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted-sky); }
.done-note[hidden] { display: none; }
.done-level { align-self: stretch; margin: 24px 0 24px; text-align: left; }
.done-level-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.done-level-xp { font-size: 13px; color: var(--muted); }
.done-level .bar { height: 10px; margin-top: 10px; }
.done-days { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.done-days .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.done-back { align-self: stretch; margin-top: auto; }
/* «Задание обновилось»: спокойная карточка посередине, «К задачам» внизу */
.gone { display: flex; flex-direction: column; gap: 16px; padding-top: 96px;
  min-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.gone-btn { width: 100%; margin-top: auto; }
.to-tasks { width: 100%; }
@media (max-height: 700px) {
  .gone { padding-top: 48px; }
  .rec-head { margin-top: 28px; }
  .rec-stop-btn { margin-top: 20px; }
}

/* «Цели и покупки» (макеты 4-04, 4-05, 4-06 V2) и «Шаги к целям». Красного нет: доля накопленного и суммы — цвет акцента и
   спокойные тона, отказы — янтарь */
.goals { gap: 12px; }
.goals-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.goals .tasks-title { margin: 8px 0 2px; }
/* «Всего нужно»: карточка цвета акцента с суммой Unbounded и полосой «отложено / нужно» */
.goals-total-card {
  padding: 18px 18px 20px; border-radius: 30px; background: var(--accent); color: #FFFFFF; box-shadow: 0 16px 30px -16px rgba(55, 115, 90, .75);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.goals-total-label { margin: 0; font-size: 16px; line-height: 1.3; color: #FFFFFF; }
.goals-total { margin: 6px 0 0; font-size: 38px; line-height: 1.15; letter-spacing: -.01em; color: #FFFFFF; overflow-wrap: normal; word-break: normal; }
.goals-total.long { font-size: 30px; }
.goals-total-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: #FFFFFF; }
.goals-total-bar { margin-top: 14px; }
.goals-total-bar .bar { height: 8px; background: rgba(255, 255, 255, .3); }
.goals-total-bar .bar-fill { background: #FFFFFF; }
.goals-sub-eb { margin: 8px 2px 0; color: var(--muted-sky); }
.goals-empty { padding: 16px; }
.goal-list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.goal-row { min-width: 0; }
.goal-head { display: flex; align-items: center; gap: 8px; }
.goal-kind { flex: none; }
.goal-kind.goal { background: var(--deco-soft); color: var(--xp-ink); }
.goal-done { flex: none; color: var(--accent); font-weight: 500; font-size: 14px; }
.goal-amount { margin-left: auto; font-size: 20px; line-height: 1.2; color: var(--ink); text-align: right; }
.goal-amount.none { font: 400 14px/1.3 var(--fb); color: var(--muted); }
.goal-title { margin: 10px 0 0; font: 500 19px/1.3 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.goal-row.done .goal-title { color: var(--muted); }
.goal-due { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.goal-bar { margin: 12px 0 6px; }
.goal-bar .bar { height: 8px; }
.goal-saved { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
/* «Откладывать примерно … ₽ в месяц»: спокойная панель, расчёт раскрывается по нажатию, стрелка меняется без поворота */
.goal-monthly-wrap { margin-top: 12px; border-radius: 20px; background: var(--soft); overflow: hidden; }
.goals .goal-monthly {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; background: transparent;
  color: var(--ink); font: 400 15.5px/1.3 var(--fb); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.goal-monthly:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 20px; }
.goal-monthly-ic { flex: none; color: var(--accent); }
.goal-monthly-text { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.goal-monthly-chev { flex: none; color: var(--muted); }
.goal-calc { margin: 0 14px; padding: 6px 0 10px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.goal-calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; line-height: 1.4; }
.goal-calc-k { flex: none; color: var(--muted); }
.goal-calc-v { min-width: 0; text-align: right; color: var(--ink); }
/* следующий шаг цели — внутри её карточки */
.goal-next { margin-top: 14px; padding: 12px 14px 8px; border-radius: 20px; background: var(--soft); }
.goal-next-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.goal-next-flag { flex: none; color: var(--accent); }
.goal-next-eb { margin: 0; color: var(--ink); white-space: nowrap; }
.goal-next-xp { flex: none; margin-left: auto; white-space: nowrap; }
.goal-next-text { margin: 8px 0 0; font-size: 16px; line-height: 1.4; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.goal-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; }
.goals .goal-next-actions .btn { width: auto; flex: 0 0 auto; min-height: 44px; }
.goals .goal-next-actions .goal-next-answer { padding: 8px 16px; font-size: 16px; }
.goals .goal-next-actions .goal-next-mark { padding: 8px 12px; color: var(--accent); font-weight: 500; text-decoration: none; }
.goal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 14px; }
.goals .goal-actions .btn { width: auto; flex: 0 0 auto; min-height: 44px; padding: 8px 14px; font-size: 15.5px; }
.goals .goal-actions .goal-done-btn { padding-left: 8px; padding-right: 8px; color: var(--accent); }
.goals .goal-actions .goal-edit-btn { padding-left: 8px; padding-right: 8px; color: var(--accent); }
.goals .goal-actions .goal-delete { margin-left: auto; padding-left: 8px; padding-right: 8px; color: var(--muted); }
/* шторка «Накоплено +» (макет 4-06): название, поле суммы, быстрые суммы, «Станет …», «Добавить» */
.goal-sheet { max-height: calc(100vh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 8px; }
.goal-sheet-grip { display: flex; justify-content: center; padding-top: 2px; }
.goal-sheet-grip .grab { margin: 0 0 6px; }
.goal-sheet-head { display: flex; align-items: flex-start; gap: 8px; }
.goal-sheet-name { flex: 1 1 auto; min-width: 0; }
.goal-sheet-title { margin: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.goal-sheet-title[tabindex="-1"]:focus { outline: none; }
.goal-sheet-sub { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
.goal-sheet-close {
  display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -2px -8px 0 0; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.goal-sheet-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.goal-sheet-box {
  display: flex; align-items: center; gap: 8px; min-height: 64px; margin-top: 14px; padding: 0 18px; border-radius: 24px; background: #FFFFFF;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.goal-sheet .goal-add-input {
  flex: 1 1 auto; min-width: 0; min-height: 60px; padding: 0; border: 0; border-radius: 0; background: transparent;
  font-family: var(--fh); font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--ink);
}
.goal-sheet .goal-add-input:focus-visible { outline: none; }
.goal-sheet-cur { flex: none; font-size: 28px; line-height: 1; color: var(--ink); }
.goal-sheet .goal-add-error { margin: 10px 0 0; font-size: 14px; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.goal-chip {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1.2px rgba(37, 51, 43, .16); color: var(--ink); font: 500 16px/1.2 var(--fb); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.goal-chip:active { filter: brightness(.96); }
.goal-chip:disabled { opacity: .5; cursor: default; }
.goal-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.goal-will { margin: 14px 0 0; padding: 12px 14px; border-radius: 18px; background: var(--soft); font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.goal-will[hidden] { display: none; }
.goal-sheet .goal-add-ok { width: 100%; margin-top: 18px; }
.goal-sheet .goal-add-ok .ic { width: 20px; height: 20px; }
/* шторка «Изменить» (хотфикс 0.9.1): вид «Покупка · Цель», поля формы строк, «Отмена» и «Сохранить» */
.goal-kind-seg { height: auto; min-height: 50px; margin-top: 14px; border-radius: 25px; }
.goal-kind-seg > button { min-height: 44px; border-radius: 22px; font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.goal-kind-seg > button:disabled { opacity: .5; cursor: default; }
.goal-kind-seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.goal-edit-fields { margin-top: 14px; }
.goal-edit-field { min-width: 0; }
.goal-edit-field .input { width: 100%; min-height: 28px; font: 500 17px/1.3 var(--fb); color: var(--ink); }
.goal-edit-field.field-bad { background: var(--amber-tint); box-shadow: inset 0 0 0 1.5px var(--amber-line); }
.goal-edit-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.goal-edit-pair .field { margin-bottom: 0; }
.goal-edit-sheet .goal-edit-error { margin: 12px 0 0; font-size: 14px; }
.goal-edit-actions { display: flex; gap: 10px; margin-top: 18px; }
.goal-edit-actions .btn { flex: 1 1 0; min-width: 0; min-height: 52px; }
.plan-head .card-head { margin-bottom: 0; }
.plan-head .muted { margin: 10px 0 0; }
.plan-amount { margin: -8px 0 12px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--accent); font-variant-numeric: tabular-nums; }
.plan-card.done .task-text { color: var(--muted); }
@media (max-width: 340px) {
  .goals .goal-actions .btn { padding-left: 12px; padding-right: 12px; font-size: 15px; }
  .goal-edit-pair { grid-template-columns: minmax(0, 1fr); }
  .goals-total { font-size: 31px; }
  .goals-total.long { font-size: 25px; }
}

/* ---------- «Я» (Задача 13, макеты 5-01…5-07 V2) ---------- */
.me { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.me-row:focus-visible, .me-days:focus-visible, .me-level:focus-visible, .attr-card:focus-visible, .me-rerate:focus-visible,
.mic-link:focus-visible, .rate:focus-visible, .hero-seg > button:focus-visible, .hero-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 9-01: карточка-купол — город, герой по колено, чипы дней внимания и уровня (ссылки — только с блоками 0.10) */
.card.me-dome { margin-top: 8px; padding: 0; overflow: hidden; }
.me-top { position: relative; height: 236px; }
.me-art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.me-city { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.me-hero-box { position: absolute; left: 50%; bottom: 0; width: 160px; height: 192px; margin-left: -80px; overflow: hidden; }
.me-hero { position: absolute; left: -43px; top: -6px; width: 246px; height: 308px; max-width: none; }
.me-hero-box.neutral .me-hero { left: 40px; top: 70px; width: 80px; height: 80px; }
.me-days { position: absolute; right: 12px; bottom: 5px; display: flex; align-items: center; min-height: 44px; color: var(--ink);
  text-decoration: none; -webkit-tap-highlight-color: transparent; }
.me-days-chip { height: 30px; padding: 0 12px 0 10px; border-radius: 15px; background: rgba(255, 255, 255, .9); box-shadow: var(--sh); }
.me-days-chip .ic { width: 15px; height: 15px; color: var(--accent); }
.me-body { padding: 14px 18px 16px; }
.me-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.me-name { flex: 1 1 auto; min-width: 0; margin: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.me-level { display: flex; align-items: center; flex: none; max-width: 100%; min-height: 44px; color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.me-level-chip { height: 32px; max-width: 100%; padding: 0 9px 0 12px; border-radius: 16px; font-size: 13.5px; }
.me-level-chip .num { margin: 0 1px; font-size: 15px; }
.me-level-chip .ic { width: 14px; height: 14px; color: var(--muted); }
.me-dome .bar { margin-top: 6px; }
.me-xp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.me-xp-now .num { font-size: 13.5px; color: var(--ink); }
.me-xp-left { white-space: nowrap; }
.me-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* выбор героя, пока не выбран: две кнопки с бюстами */
.me-pick { padding: 16px; }
.me-pick-title { margin: 0; }
.me-pick-text { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.me-pick-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.pick-btn { min-height: 52px; padding: 6px 12px; }
.pick-bust { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #E3F1EA; }

/* меню разделов */
.me-menu { padding: 2px 16px; }
.me-row { min-height: 64px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.me-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.me-row-sub { font-size: 13px; line-height: 1.35; color: var(--muted); }
.me-row-chev { width: 18px; height: 18px; color: var(--muted); }

/* заголовки подэкранов «Я»: «Достижения», «Характеристики», «Мои данные» (5-03, 5-06, 9-02) */
.ach-title, .attrs-title, .data-title { margin: 8px 0 0; }
.attrs-lead { margin: -6px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted-sky); }
/* «Она · Он»: сегмент в шторке «Сменить героя» (профиль), во всю ширину листа */
.hero-seg { flex: none; width: 210px; height: 50px; border-radius: 25px; }
.hero-sheet-b .hero-seg { width: 100%; }
.hero-seg > button { min-height: 44px; padding: 0 8px; border-radius: 22px; color: var(--ink); font-size: 15px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.hero-seg > button:disabled { opacity: .5; cursor: default; }
.seg-bust { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #E3F1EA; }

/* 5-03: характеристики — десять делений или «мало данных» с ростком */
.attr-list { display: flex; flex-direction: column; gap: 8px; }
.attr-card { display: block; padding: 12px 14px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.attr-head { display: flex; align-items: center; gap: 10px; }
.attr-icon { width: 34px; height: 34px; }
.attr-icon .ic { width: 18px; height: 18px; }
.attr-name { flex: 1 1 auto; min-width: 0; }
.attr-val { flex: none; font-size: 17px; line-height: 1; }
.attr-of { font-size: 13px; color: var(--muted); }
.attr-low { flex: none; font-size: 13px; color: var(--muted); }
.attr-segs { display: flex; gap: 3px; margin-top: 8px; }
.attr-segs > i { flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--track); }
.attr-segs > i.on { background: var(--accent); }
.attr-more { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; line-height: 1.35; }
.attr-more .ic { width: 20px; height: 20px; color: var(--accent); }
.attrs-note { margin: 4px 0 0; color: var(--muted-sky); }

/* 5-04: «Мой профиль» */
.profile { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.profile-title { margin: 8px 0 0; }
.profile-eb { margin: 0; }
.profile-goal { margin: 8px 0 0; font: 500 17px/1.35 var(--fb); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.profile-wants { margin: 8px 0 0; font-size: 15px; line-height: 1.45; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.p-items { margin: 4px 0 0; padding: 0; list-style: none; }
.p-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.p-item + .p-item { box-shadow: 0 -1px 0 var(--line); }
.p-item-body { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.p-item-title { font: 500 15px/1.35 var(--fb); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.p-item-meta, .p-item .more { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.status-chip { flex: none; }
/* уже 360 px: чип статуса под заголовком и подписью, а не сбоку — заголовок не сжимается в 3–4 строки */
@media (max-width: 359px) {
  .p-item { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.status-chip .ic { width: 13px; height: 13px; }
.p-empty { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.p-foot { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.me-rerate { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; background: var(--deco-soft);
  box-shadow: none; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.me-rerate-icon { background: #FFFFFF; }
.me-rerate-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.me-rerate-sub { font-size: 13px; line-height: 1.35; }
.me-rerate-chev { width: 18px; height: 18px; color: var(--deco-ink); }
/* «Сменить героя» в «Мой профиль» (строка только с account) */
.hero-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; text-align: left;
  color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-row-icon { background: #FFFFFF; box-shadow: inset 0 0 0 1.3px rgba(55, 115, 90, .35); color: var(--accent); }
.hero-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.hero-row-sub { font-size: 13px; line-height: 1.35; color: var(--muted); }
.hero-row-chev { width: 18px; height: 18px; color: var(--muted); }
.mic-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; color: var(--accent);
  font: 500 14px/1.2 var(--fb); text-decoration: none; }
.mic-link .ic { width: 18px; height: 18px; }
.profile-disclaimer { margin: 0; padding: 0; font-size: 12.5px; line-height: 1.4; text-align: left; color: var(--muted-sky); }

/* 5-05: повторная оценка — герой по пояс в круглом окне на город, пять круглых кнопок */
.rerate { display: flex; flex-direction: column; align-items: center; min-width: 0; padding-top: 32px; text-align: center; }
.rerate-window { position: relative; flex: none; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: #E3F1F1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.rerate-city { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.rerate-hero-box { position: absolute; left: 15px; bottom: 0; width: 120px; height: 150px; overflow: hidden; }
.rerate-hero { position: absolute; left: -60px; top: -9px; width: 240px; height: 300px; max-width: none; }
.rerate-hero-box.neutral .rerate-hero { left: 25px; top: 40px; width: 70px; height: 70px; }
.rerate-question { max-width: 300px; margin: 24px 0 0; }
.rerate-scale { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted-sky); }
.rerate-values { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.rate { flex: none; padding: 0; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rate:disabled { opacity: .5; cursor: default; }
.rate.on:disabled { opacity: 1; }
.rerate-ends { display: flex; justify-content: space-between; gap: 12px; align-self: stretch; margin-top: 12px; padding: 0 8px;
  font-size: 12px; color: var(--muted-sky); }
.rerate-thanks { margin: 20px 0 0; font-size: 17px; line-height: 1.4; }
@media (max-width: 374px) {
  .rate { width: 48px; height: 48px; font-size: 18px; }
  .rerate-values { gap: 8px; }
}

/* 5-06 / 5-07: «Мои данные» — что хранится, «Скачать», тихое «Удалить всё» (никогда не красное) и спокойная шторка */
.my-data { gap: 12px; }
.data-info-title { margin: 0; }
.data-lines { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.data-line { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.data-line::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.my-data .data-export { width: 100%; min-height: 52px; }
.my-data .data-delete { width: 100%; min-height: 44px; margin-top: -6px; color: var(--muted-sky); }
.data-help { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--sh); }
.data-help-icon { width: 32px; height: 32px; }
.data-help-icon .ic { width: 16px; height: 16px; }
.data-help-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; }
.data-help-line { margin: 0; }
.data-help-num { font-weight: 500; }
.data-helpline { margin: 2px 0 0; color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.data-sheet { max-height: calc(100vh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 8px; }
.data-sheet-icon { width: 52px; height: 52px; background: var(--amber-tint); box-shadow: none; color: var(--amber-ink); }
.data-sheet-icon .ic { width: 26px; height: 26px; }
.data-sheet-title { margin: 12px 0 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.data-sheet-title[tabindex="-1"]:focus { outline: none; }
.data-list { margin: 8px 0 0; padding: 0; list-style: none; }
.data-list li { position: relative; margin-top: 6px; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.data-list li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.data-sheet-note { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.data-sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.data-sheet .btn { width: 100%; min-height: 52px; }
.data-sheet .open-chat-box { margin: 0; }
.data-pending, .data-hint { margin: 0; padding: 12px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; text-align: center; }
.data-pending { background: var(--soft); color: var(--ink); }
.data-hint { background: var(--amber-tint); color: var(--amber-ink); }

/* ---------- Этап 0.10: привычки, испытания, календарь дней внимания, достижения, шторка и тост с действием ----------
   Классы повторяют gen/frames4.py (CSS); цвета — токены 0.9, красного нет, цели касания не меньше 44 px. */
.toast.act { display: flex; align-items: center; gap: 12px; }
.toast.show.act { pointer-events: auto; }
.toast-text { min-width: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.toast-act {
  flex: none; min-width: 44px; min-height: 44px; margin: -8px -10px -8px 0; padding: 0 12px; border: 0; border-radius: 22px; background: transparent;
  color: var(--tint); font: 500 14px/1.2 var(--fb); cursor: pointer; white-space: nowrap;
}
/* после таймера тост лишь прозрачный: кнопка не остаётся ни в порядке Tab, ни под пальцем */
.toast:not(.show) .toast-act { visibility: hidden; }
.toast-act:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }

.sheet-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 28; }
.sheet-layer .sheet { max-height: calc(100vh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sheet-h { margin: 4px 0 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.sheet-h[tabindex="-1"]:focus { outline: none; }
.sheet-b { margin-top: 8px; }
.sheet-b .open-chat-box { margin-top: 12px; }                 /* кризисный ответ в шторке: «Открыть чат» под карточкой */
.sheet-layer .sheet-actions { flex-direction: column; gap: 4px; padding-top: 14px; }
.sheet-layer .sheet-actions > .btn { flex: none; width: 100%; }

.mk {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1.6px rgba(55, 115, 90, .55); color: transparent; cursor: pointer;
}
.mk.on { background: var(--accent); box-shadow: 0 8px 16px -10px rgba(55, 115, 90, .9); color: #FFFFFF; }
.mk:focus-visible, .hold:focus-visible, .cc:focus-visible, .dd:focus-visible, .mnav a:focus-visible, .stp a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 56px; padding: 6px 0; }
.hrow + .hrow { box-shadow: 0 -1px 0 var(--line); }
.hrow .tx { flex: 1 1 96px; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 44px; color: inherit; text-decoration: none; }
.hrow .tt { display: block; font: 500 15.5px/1.3 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.hrow .ss { display: block; margin-top: 1px; font: 400 13px/1.35 var(--fb); color: var(--muted); }
.hold {
  height: 44px; padding: 0 12px; border: 0; border-radius: 22px; display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto;
  background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1.3px rgba(55, 115, 90, .42); color: var(--ink); font: 500 14px/1 var(--fb);
  white-space: nowrap; cursor: pointer;
}
.hold .ic { color: var(--accent); }
.ring { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; }
.ring svg { position: absolute; left: 0; top: 0; }
.ring b { position: relative; font: 500 15px/1 var(--fh); color: var(--ink); }
.ring small { position: relative; display: block; margin-top: 4px; font: 400 12px/1.2 var(--fb); color: var(--muted); }
.ring .trk, .big-ring .trk { fill: rgba(255, 255, 255, .7); stroke: rgba(55, 115, 90, .16); }
.ring .arc, .big-ring .arc { fill: none; stroke: var(--accent); stroke-linecap: round; }
.big-ring { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.big-ring svg { position: absolute; left: 0; top: 0; }
.big-ring b { position: relative; font: 500 34px/1 var(--fh); color: var(--ink); letter-spacing: -.02em; }
.big-ring small { position: relative; margin-top: 6px; font: 400 14px/1.2 var(--fb); color: var(--muted); }

.dd {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font: 500 14px/1 var(--fb); font-style: normal; color: var(--ink);
}
.dd.a1 { background: var(--a1); color: var(--ink); }
.dd.a2, .dd.on { background: var(--accent); color: #FFFFFF; }
.dd.today { outline: 1.5px solid var(--accent); outline-offset: 2px; color: var(--ink); }
.dd.a2.today, .dd.on.today { color: #FFFFFF; }
.dd.sel { outline: 2px solid var(--ink); outline-offset: 2px; }
.dd.fut { color: var(--muted); }                       /* opaque tokens only: a frame alpha fell below 4.5:1 on the card */
.dd.pre { color: var(--muted-sky); font-weight: 400; }   /* «до начала данных»: тоньше и светлее обычных дней, но не бледнее AA */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 0; }
.cal .wd, .wk .wd { text-align: center; padding: 2px 0 6px; font: 500 11px/1 var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal .d { height: 46px; display: flex; align-items: center; justify-content: center; }
.mnav { display: flex; align-items: center; gap: 4px; }
.mnav a, .mnav button, .mnav span.nb {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); background: transparent;
}
.mnav a, .mnav button { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.2px rgba(55, 115, 90, .28); cursor: pointer; }
.mnav .mt { flex: 1; text-align: center; font: 500 16px/1.2 var(--fh); }
.calk { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 12.5px/1.3 var(--fb); color: var(--muted-sky); }
.calk span { display: inline-flex; align-items: center; gap: 6px; }
.calk i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.calk i.a1 { background: var(--a1); }
.calk i.a2 { background: var(--accent); }
.calk i.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dayline {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95);
}
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.wk .c { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; }
@media (max-width: 374px) {
  .dd { width: 38px; height: 38px; }
  .cal .d { height: 40px; }
}

.achievements { min-width: 0; }
.ach-lead { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted-sky); }
.ach-near { margin-top: 12px; padding: 10px 16px 6px; }
.ach-near-eb { margin: 0; }
.ach-near-list, .ach { margin: 0; padding: 0; list-style: none; }
.ach-near-row { gap: 12px; padding: 8px 0; }
.ach-near-text { flex: 1 1 auto; min-width: 0; }
.ach-near-hint { margin-top: 1px; font-size: 13px; line-height: 1.38; color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.ach-group { min-width: 0; }
.ach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.at {
  display: flex; flex-direction: column; align-items: center; padding: 12px 6px 11px; border-radius: 20px; text-align: center;
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 10px 24px -18px rgba(30, 70, 70, .35);
}
.at.no { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(37, 51, 43, .1); }
.abd { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.abd.got { background: var(--g-tint, var(--tint)); box-shadow: inset 0 0 0 2px var(--g-base, var(--accent)); color: var(--g-deep, var(--accent)); }
.abd .ic { width: 48%; height: 48%; }           /* общее правило .ic (20 px) не должно ужимать значок в круге */
.abd.no { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px rgba(37, 51, 43, .22); color: var(--muted); }
.at .nm { margin-top: 8px; font: 500 13px/1.25 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.at .at-cap { margin-top: 3px; font: 400 11.5px/1.3 var(--fb); color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
/* неполученное почти прозрачно: подпись лежит прямо на небе — --muted-sky (AA) */
.at.no .at-cap { color: var(--muted-sky); }
.agh { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font: 500 11px/1.2 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-sky); }
.agh i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--g-base, var(--accent)); }

.cc {
  height: 44px; padding: 0 16px; border: 0; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1.2px rgba(37, 51, 43, .16); color: var(--ink); font: 500 15px/1 var(--fb); white-space: nowrap; cursor: pointer;
}
.cc.on { background: var(--accent); color: #FFFFFF; box-shadow: none; }
.cc.g { padding: 0 14px 0 11px; }
.ccw { display: flex; flex-wrap: wrap; gap: 8px; }
.ccr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ccr .cc { padding: 0; }
.stp { display: flex; align-items: center; gap: 6px; flex: none; }
.stp a, .stp button {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1.2px rgba(55, 115, 90, .32); cursor: pointer;
}
.stp b { min-width: 64px; text-align: center; font: 500 18px/1 var(--fh); color: var(--ink); }
.cnt { font: 400 12px/1 var(--fb); color: var(--muted); }
.hint, .info {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px; font: 400 14px/1.42 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere;
}
.hint { background: var(--deco-soft); }
.hint .ic { color: var(--amber-ink); margin-top: 1px; }
.info { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(55, 115, 90, .22); }
.info .ic { color: var(--accent); margin-top: 1px; }
.info .ic, .hint .ic, .dayline .ic { flex: none; }
.note-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.note-row + .note-row { box-shadow: 0 -1px 0 var(--line); }
.note-row .em { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: rgba(255, 255, 255, .8); font-size: 17px; }

/* 9-03: «Новое достижение» — лист колонкой в порядке кадра: значок, надпись, название (заголовок листа), зачем, дата, кнопки */
.ach-new { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ach-new .grab { order: 0; }
.ach-new .sheet-b { display: contents; }
.ach-new-art { order: 1; position: relative; margin-top: 6px; }
.ach-new-art .abd .ic { width: 34px; height: 34px; }   /* 9-03: значок 34 px в круге 76 px */
.ach-new-spark { position: absolute; right: -16px; top: -8px; width: 22px; height: 22px; color: var(--deco); }
.ach-new-eb { order: 2; justify-content: center; margin: 16px 0 0; }
.ach-new .sheet-h { order: 3; margin: 8px 0 0; }
.ach-new-why { order: 4; max-width: 300px; margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.ach-new-date { order: 5; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ach-new .sheet-actions { order: 6; align-self: stretch; margin-top: 18px; }
.ach-new .sheet-actions > .btn-quiet { min-height: 44px; }

/* 320 px: «С возвращением» (12 букв) целиком в плитке на три в ряд */
@media (max-width: 359px) {
  .at { padding: 12px 3px 10px; }
  .at .nm { font-size: 11.5px; }
}

/* 9-04, 9-05: календарь дней внимания — заголовок месяца, сетка в карточке, строка дня, подписи на небе (--muted-sky, T11 M6) */
.calendar { min-width: 0; }
.cal-sum { margin: 8px 0 0; font: 400 15px/1.4 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.cal-n { font-weight: 500; }
.cal-total { color: var(--muted-sky); }
.cal-card { margin-top: 12px; padding: 10px 10px 14px; }
.cal-grid { margin-top: 8px; }
.cal-mt { margin: 0; min-width: 0; }
.cal-mt:focus { outline: none; }
.cal-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; min-width: 0; }
.cal-since { align-items: flex-start; }
.cal-since b, .cal-dayline-text b { font-weight: 500; }
.cal-dayline-text { font: 400 15px/1.4 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.cal-hint { margin: 0; font: 400 13px/1.4 var(--fb); color: var(--muted-sky); }
.cal-note { color: var(--muted-sky); }
button.dd { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Этап 0.10, Задача 14: «Сегодня» с привычками и испытанием (10-01), «Продолжаем?» (11-05), «Как прошло?» (10-08) ---------- */
.habits-card { padding: 12px 16px 4px; }
.habits-head { display: flex; align-items: center; gap: 8px; }
.habits-eb { flex: 1 1 auto; margin: 0; min-width: 0; }
.habits-eb .ic { width: 15px; height: 15px; }
.habits-all {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; margin: -12px -10px -12px 0;
  padding: 0 10px; color: var(--accent); font: 500 14px/1 var(--fb); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.habits-all:focus-visible, .hrow .tx:focus-visible, .chal-link:focus-visible, .cap-main:focus-visible, a.days:focus-visible, .habits-entry:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px;
}
.hrow .tx { -webkit-tap-highlight-color: transparent; }
.mk:disabled, .hold:disabled { cursor: default; }
.hold.on { background: var(--accent); box-shadow: 0 8px 16px -10px rgba(55, 115, 90, .9); color: #FFFFFF; }
/* строка испытания: кольцо, название, круг отметки */
.chal-cap { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; }
.chal-link { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.chal-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.chal-link .tt { display: block; font: 500 15.5px/1.3 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.chal-link .ss { display: block; margin-top: 1px; font: 400 13px/1.35 var(--fb); color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
/* 11-05: «Продолжаем?» — кольцо и вопрос, текст, главная кнопка, две вторичные в ряд */
.quiet-card { padding: 16px 16px 14px; }
.quiet-head { display: flex; align-items: center; gap: 12px; }
.quiet-lead { flex: 1 1 auto; min-width: 0; }
.quiet-sub { font: 400 13px/1.35 var(--fb); color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.quiet-title { margin: 2px 0 0; }
.quiet-text { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.quiet-main { width: 100%; margin-top: 12px; }
.btns2 { display: flex; gap: 10px; margin-top: 8px; }
.btns2 > .btn { flex: 1 1 0; min-width: 0; }
.quiet-card .btns2 .btn { min-height: 44px; padding-left: 8px; padding-right: 8px; }
/* капсула героя с календарём: две ссылки рядом — «Я» и число дней (на #days) */
.hero-cap.split { padding: 0; gap: 0; }
.cap-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 10px 8px 10px 10px; border-radius: 44px 0 0 44px;
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.days { align-self: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 10px 0; padding: 0 16px 0 14px; color: inherit;
  text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* шторка «Как прошло?»: подпись над заголовком, «+2 опыта» справа от него, затем чипы, строка, счётчик и кнопки */
.note-sheet { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  grid-template-areas: "grab grab" "cap cap" "title xp" "moods moods" "field field" "hint hint" "actions actions"; }
.note-sheet .grab { grid-area: grab; }
.note-sheet .sheet-b { display: contents; }
.note-cap { grid-area: cap; margin: 0; font: 400 13px/1.35 var(--fb); color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.note-sheet .sheet-h { grid-area: title; margin: 4px 0 0; }
.note-xp { grid-area: xp; justify-self: end; margin-top: 4px; }
.note-moods { grid-area: moods; margin-top: 14px; }
.note-field { grid-area: field; margin: 12px 0 0; }
.note-hint { grid-area: hint; display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 0 4px; }
.note-sheet .sheet-actions { grid-area: actions; margin-top: 4px; }
.note-sheet .sheet-actions > .btn-quiet { min-height: 44px; }
.cc-e { font-size: 18px; line-height: 1; }
.cc:disabled { opacity: .5; cursor: default; }
/* вход «Привычки и аскезы» в «Задачах»: та же карточка-ссылка, что «Цели и покупки» */
.habits-entry { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.he-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.he-title { word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.he-sum { font-size: 13px; line-height: 1.35; color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.he-chev { flex: none; width: 18px; height: 18px; color: var(--muted); }

/* ---------- Этап 0.10, Задача 15: «Привычки и аскезы» (10-03, 10-10), страница привычки (10-07), предел трёх (10-09), архив ---------- */
.habits-screen, .archive-screen, .habit-page { min-width: 0; }
/* подписи прямо на небе — --muted-sky (T11 M6) */
.habits-eyebar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 -4px; padding: 0 2px; }
.habits-eyebar .eb, .habits-eyebar .hint-r, .habits-eyebar2 { color: var(--muted-sky); }
.habits-eyebar .eb { margin: 0; }
.habits-eyebar .hint-r { font: 400 12px/1.3 var(--fb); text-align: right; }
.habits-eyebar2 { margin: 8px 0 -4px; padding: 0 2px; }
.habits-list { padding: 2px 16px; }
.habits-empty-card { padding: 16px; }
.habits-empty { margin: 0; font-size: 15px; line-height: 1.45; }
.hl-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.hl-row + .hl-row { box-shadow: 0 -1px 0 var(--line); }
.hl-row:focus-visible, .limit-row:focus-visible, .chal-card:focus-visible, .archive-row:focus-visible, .ar-row .tx:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px;
}
.hl-body { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.hl-row .tt { display: block; font: 500 15.5px/1.3 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.hl-row .ss, .chal-card .ss, .ar-row .ss { display: block; font: 400 13px/1.35 var(--fb); color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.hl-chev { flex: none; width: 18px; height: 18px; color: var(--muted); }
.habit-add, .challenge-start { min-height: 52px; }
.chal-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.chal-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.chal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.chal-card .tt { word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.chal-card .chip { white-space: normal; height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; }
.one-at-a-time { display: flex; align-items: flex-start; gap: 8px; padding: 0 4px; font: 400 13px/1.4 var(--fb); color: var(--muted-sky); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.one-at-a-time .ic { margin-top: 1px; }
.archive-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ar-icon { color: var(--muted); }
.ar-label { flex: 1 1 auto; font: 400 15px/1.3 var(--fb); }
.ar-count { font: 400 13px/1 var(--fb); color: var(--muted); }
/* пауза 10-10: строки с отметками — те же, что на «Сегодня» (.hrow) */
.habits-list .hrow .ss { color: var(--muted); }
/* 10-10 и 10-01 на 390 px: таблетка «Сегодня удержался(лась)» уже, чтобы название осталось в одну строку (на 320 оно может переноситься) */
.habits-list .hold { padding: 0 10px; font: 500 13px/1 var(--fb); gap: 4px; }
.habits-list .hrow .tx { flex: 1 1 88px; }
.habits-card .hold { padding: 0 10px; font: 500 13px/1 var(--fb); gap: 4px; }
.habits-card .hrow .tx { flex: 1 1 88px; }

/* 10-09: «Сейчас у тебя три привычки» — значок, заголовок, текст, три строки-ссылки, «Понятно» */
.limit-sheet { display: flex; flex-direction: column; }
.limit-sheet .grab { order: 0; }
.limit-sheet .sheet-b { display: contents; }
.limit-icon { order: 1; width: 52px; height: 52px; margin-top: 4px; background: var(--tint); box-shadow: inset 0 0 0 1.3px rgba(55, 115, 90, .35); }
.limit-icon .ic { width: 26px; height: 26px; }
.limit-sheet .sheet-h { order: 2; margin: 14px 0 0; }
.limit-text { order: 3; margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.limit-list { order: 4; margin-top: 8px; }
.limit-sheet .sheet-actions { order: 5; margin-top: 10px; }
.limit-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.limit-row + .limit-row { box-shadow: 0 -1px 0 var(--line); }
.limit-row .tt { flex: 1 1 auto; min-width: 0; font: 500 16px/1.3 var(--fb); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.limit-chev { flex: none; width: 18px; height: 18px; color: var(--muted); }

/* 10-07: страница привычки */
.habit-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; min-width: 0; }
.habit-title { margin: 0; max-width: 100%; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.strip-card { padding: 12px 10px; }
.wk .dd { color: var(--muted); }
.wk .dd.pre { color: var(--muted-sky); font-weight: 400; }
.wk .dd.today { color: var(--ink); }
.wk .dd.on { color: #FFFFFF; }
.wk .dd:disabled { cursor: default; }
.week-caption { margin: 10px 0 0; font: 400 12px/1.4 var(--fb); color: var(--muted); text-align: center; }
.stats { display: flex; gap: 8px; min-width: 0; }
.stat-card { flex: 1 1 0; min-width: 0; padding: 12px 14px; }
.stat-card .stat { font-size: 22px; }
.stat-cap { margin-top: 4px; font: 400 12px/1.35 var(--fb); color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.notes-card { padding: 12px 14px 4px; }
.notes-card .eb { margin: 0 0 2px; }
.notes-card .sp, .note-row .sp { flex: 1 1 auto; min-width: 0; }
.note-day { font: 400 12px/1.35 var(--fb); color: var(--muted); }
.note-text { font: 400 14px/1.45 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.rest-card { padding: 12px 14px; }
.rest-head { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.rest-head .h4 { margin: 0; color: var(--ink); }
.rest-text { margin: 4px 0 0; font: 400 13px/1.4 var(--fb); color: var(--muted); }
.rest-chips { display: flex; gap: 8px; margin-top: 10px; }
.rest-card .cc { flex: 1 1 0; min-width: 0; padding: 0 6px; }
.state-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.state-line { margin: 0; font-size: 15px; line-height: 1.45; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.finish-btn { color: var(--muted-sky); min-height: 44px; }
.finish-btn .ic { color: var(--muted-sky); }

/* архив: завершённые привычки с «Вернуть», завершённые испытания с итогом и заметкой */
.archive-habits, .archive-challenges { padding: 2px 16px; }
.ar-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; }
.ar-row + .ar-row { box-shadow: 0 -1px 0 var(--line); }
.ar-row .tx, .ar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: inherit; text-decoration: none; }
.ar-row .tt { display: block; font: 500 15.5px/1.3 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.ar-note { display: block; margin-top: 2px; font: 400 13px/1.4 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.tasks .ar-row .ar-back { width: auto; flex: none; min-height: 44px; padding: 0 14px; font-size: 14px; }
@media (max-width: 374px) {
  .ar-row { flex-wrap: wrap; }
  .stat-card .stat { font-size: 19px; }
}

/* ---------- Этап 0.10, Задача 16: создание привычки и испытания (10-04, 10-05, 10-06, 11-01, 11-02) ---------- */
.add-screen { min-width: 0; min-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.add-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
/* подписи и строки прямо на небе — --muted-sky */
.add-eb { margin: 8px 2px 0; color: var(--muted-sky); }
.add-notice, .add-note { margin: 0; color: var(--muted-sky); font-size: 13px; }
.add-notice { font-size: 14px; }
.add-note .ic, .add-notice .ic { color: var(--muted-sky); }
/* 10-04: «Подобрать под меня», шаблоны по сферам */
.suggest-card { display: flex; flex-direction: column; gap: 12px; }
.suggest-head { display: flex; align-items: center; gap: 12px; }
.suggest-text { flex: 1 1 auto; min-width: 0; }
.suggest-title { margin: 0; }
.suggest-sub { margin-top: 2px; font: 400 14px/1.4 var(--fb); color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.suggest-btn { width: 100%; }
.suggest-wait { display: flex; align-items: center; gap: 12px; color: var(--ink); font: 400 15px/1.4 var(--fb); }
.suggest-wait .ic { color: var(--accent); }
.group-chips { margin-top: -2px; }
.group-chips .cc .ic { color: var(--g-deep, var(--accent)); }
.group-chips .cc.on .ic { color: #FFFFFF; }
.tpl-list { padding: 2px 14px; }
.tpl-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; background: transparent; color: var(--ink);
  font: 400 16.5px/1.3 var(--fb); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tpl-row + .tpl-row { box-shadow: 0 -1px 0 var(--line); }
.tpl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.tpl-text { flex: 1 1 auto; min-width: 0; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.tpl-plus { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--accent); box-shadow: inset 0 0 0 1.5px rgba(55, 115, 90, .45); }
/* 10-05: подобранное — карточки с «Добавить», испытание выделено мёдом */
.sug-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sug-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.sug-chal { box-shadow: inset 0 0 0 1.5px rgba(232, 184, 109, .6), var(--sh); }
.sug-chal .chip { align-self: flex-start; margin-bottom: 2px; }
.sug-title { word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.sug-row { display: flex; align-items: center; gap: 10px; }
.sug-meta { flex: 1 1 auto; min-width: 0; }
.sug-kind { font: 400 14px/1.4 var(--fb); color: var(--ink); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.sug-why { font: 400 13px/1.35 var(--fb); color: var(--muted); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.sug-add { flex: none; gap: 4px; padding: 0 14px 0 10px; }
.sug-again { gap: 8px; }
/* 10-06, 11-01, 11-02: форма — поле, счётчик, сегмент, степпер, подсказка, кнопка внизу */
.add-field { margin: 0; }
.add-count-row { display: flex; justify-content: flex-end; margin-top: -8px; padding: 0 4px; }
.add-count-row .cnt { color: var(--muted-sky); }
.add-seg { height: auto; min-height: 46px; }
.add-seg > button { min-height: 44px; padding: 6px 6px; line-height: 1.2; text-align: center; font-size: 15px; cursor: pointer; }
.add-seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.add-seg > button:disabled { cursor: default; }
.add-step-slot:empty { display: none; }
.add-step { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; }
.add-step-text { flex: 1 1 auto; min-width: 0; }
.add-step-title { font: 500 15px/1.3 var(--fb); }
.add-step-sub { font: 400 13px/1.35 var(--fb); color: var(--muted); }
.add-step .stp { gap: 4px; }
.add-step .stp b { min-width: 48px; }
.add-step .stp button:disabled { opacity: .4; cursor: default; }
.add-step .stp button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.add-slot { min-width: 0; }
.add-slot:empty { display: none; }
.add-refusal { margin: 0; }
.add-hint { margin-top: 4px; }
.add-foot { margin-top: auto; padding-top: 12px; }
.add-submit { width: 100%; }
@media (max-width: 374px) {
  .add-step .stp b { min-width: 36px; }
  .add-seg > button { font-size: 14px; }
}

/* ---------- Этап 0.10, Задача 17: испытание (11-03, 11-04), «Смягчить условие» (11-06), итог (11-07, 11-08) ---------- */
.chal-screen, .soften-screen, .fin-screen { min-width: 0; }
.chal-screen { min-height: calc(100vh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.chal-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; min-width: 0; }
/* подписи прямо на небе — --muted-sky (T11 M6) */
.chal-eb { margin: 0; color: var(--muted-sky); }
.chal-eb .ic { color: var(--muted-sky); }
.chal-title { margin: 0; max-width: 100%; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.chal-sub { margin: -4px 0 0; font: 400 15px/1.4 var(--fb); color: var(--muted-sky); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.chal-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.chal-chips .chip { white-space: normal; height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; }
.doctor-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px; color: var(--ink);
  background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.5px rgba(55, 115, 90, .3); font: 400 15px/1.45 var(--fb); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.doctor-note .ic { flex: none; margin-top: 1px; color: var(--accent); }
.chal-ring-box { display: flex; justify-content: center; margin: 8px 0 0; }
.chal-ring { width: 150px; height: 150px; flex: none; }
.chal-ring.s { width: 132px; height: 132px; }
.chal-ring b { font-size: 38px; }
.chal-how { margin: 0; padding: 0 12px; text-align: center; font: 400 14px/1.45 var(--fb); color: var(--muted-sky); }
.chal-strip { padding: 12px 10px; }
.chal-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.tasks .chal-more .btn { width: auto; flex: 0 1 auto; min-height: 44px; padding: 0 12px; font-size: 16px; }
.chal-finish, .chal-finish:disabled { color: var(--muted-sky); }
.chal-foot { margin-top: auto; padding-top: 12px; }
.chal-main.on { color: var(--accent); }
.chal-main:disabled { opacity: .7; cursor: default; }
.wk .dd:focus-visible, .chal-main:focus-visible, .chal-soften:focus-visible, .chal-finish:focus-visible, .soften-chip:focus-visible, .soften-save:focus-visible,
.fin-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 11-06 */
.soften-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
.soften-progress { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 30px; }
.soften-progress-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soften-kept { font: 400 14px/1.3 var(--fb); color: var(--muted); }
.soften-done { font: 500 17px/1.3 var(--fb); color: var(--ink); }
.soften-was { margin: 0; }
.soften-was .v { color: var(--muted); }
.soften-was-text { word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.soften-next { margin: 0; }
.soften-next .input { width: 100%; }
.soften-chip-list { margin-top: -4px; }
.soften-chip-list .cc { height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; text-align: left; line-height: 1.3; max-width: 100%; white-space: normal; }
.soften-foot { display: flex; flex-direction: column; gap: 8px; }
.soften-save:disabled { opacity: .55; cursor: default; }
.soften-term { margin: 0; text-align: center; font: 400 14px/1.4 var(--fb); color: var(--muted-sky); }
/* 11-07, 11-08: герой в круглом окне на город; у пройденного замкнутое мятное кольцо, у завершённого раньше — только тонкая белая кромка */
.fin-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding-top: 14px; min-width: 0; }
.fin-art { position: relative; flex: none; width: 150px; height: 150px; margin: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .9); }
.fin-art.closed { box-shadow: 0 0 0 5px rgba(255, 255, 255, .8), 0 0 0 9px var(--accent); }
.fin-window { position: absolute; left: 0; top: 0; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: #E3F1F1; }
.fin-city { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.fin-hero-box { position: absolute; left: 15px; bottom: 0; width: 120px; height: 150px; border-radius: 0 0 60px 60px; overflow: hidden; }
.fin-hero { position: absolute; left: -32px; top: -5px; width: 185px; height: 231px; max-width: none; }
.fin-hero-box.neutral .fin-hero { left: 33px; top: 48px; width: 55px; height: 55px; }
.fin-spark { position: absolute; right: -8px; top: 4px; width: 18px; height: 18px; color: var(--deco); }
.fin-eb { margin: 16px 0 0; justify-content: center; color: var(--muted-sky); }
.fin-title { margin: 6px 0 0; max-width: 100%; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.fin-line { max-width: 310px; margin: 6px 0 0; font: 400 15px/1.45 var(--fb); color: var(--muted-sky); }
.fin-xp { height: 30px; margin-top: 12px; padding: 0 12px; border-radius: 15px; font-size: 13px; }
.fin-lower { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; margin-top: 12px; }
.fin-field { min-height: 96px; margin: 0; }
.fin-input { display: block; width: 100%; min-height: 56px; padding: 0; border: 0; background: transparent; resize: none; font: 400 16px/1.4 var(--fb); color: var(--ink); }
.fin-input::placeholder { color: var(--muted); opacity: 1; }
.fin-hint { display: flex; justify-content: space-between; gap: 8px; padding: 0 4px; }
.fin-hint .cnt { color: var(--muted-sky); }
.fin-foot, .fin-lower .add-foot { margin-top: auto; padding-top: 12px; }
.big-ring .dot { fill: var(--accent); }
.chal-main-ic { display: inline-flex; }

/* ---------- «Напоминания» (Задача 18, макеты 12-01, 12-02): переключатель, время со степпером, пузырь бота ---------- */
.remind-screen .rm-title { margin: 8px 0 0; }
.rm-lead { margin: -6px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted-sky); }
.rm-card { padding: 6px 18px; }
.rm-row { justify-content: space-between; gap: 12px; min-height: 64px; }
.rm-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.rm-row-sub { font-size: 13px; line-height: 1.35; color: var(--muted); }
.rm-switch {
  display: flex; align-items: center; justify-content: center; flex: none; min-width: 56px; min-height: 44px; padding: 0; border: 0;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rm-switch .toggle { display: block; }
.rm-switch:disabled { opacity: .55; cursor: default; }
.rm-switch:focus-visible, .rm-step-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 22px; }
.rm-stepper { display: flex; align-items: center; flex: none; gap: 8px; }
.rm-step-btn {
  display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px rgba(55, 115, 90, .3); color: var(--accent); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rm-step-btn:disabled { opacity: .45; cursor: default; }
.rm-time-val { min-width: 76px; text-align: center; font-size: 20px; line-height: 1; color: var(--ink); }
.rm-range { margin: -4px 0 0 4px; font-size: 13px; line-height: 1.4; color: var(--muted-sky); }
.rm-eyebrow { margin: 6px 0 -4px 4px; color: var(--muted-sky); }
/* пузырь и кнопки бота (12-02): рисунок, не управление; кнопки #5A7A67 с белым текстом — 4,76:1 */
.rm-chat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border-radius: 28px; background: var(--tint); }
.rm-bubble {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 14px 8px;
  border-radius: 20px 20px 20px 8px; background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 2px rgba(37, 51, 43, .08);
}
.rm-bubble-text { flex: 1 1 auto; min-width: 0; margin: 0; font: 400 16px/1.4 var(--fb); word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; }
.rm-bubble-time { flex: none; font: 400 13px/1.4 var(--fb); color: var(--muted); }
.rm-kbd { display: flex; flex-direction: column; gap: 6px; }
.rm-kbtn {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border-radius: 14px; background: #5A7A67;
  color: #FFFFFF; font: 500 15px/1.2 var(--fb); text-align: center; word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere;
}
.rm-note { margin: 0; color: var(--muted-sky); }
@media (max-width: 374px) {
  .rm-time-row { flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: 14px; }
  .rm-stepper { justify-content: space-between; }
  .rm-time-val { flex: 1 1 auto; }
}