/* ==========================================================================
   «Слово» — визуальный язык: «ТЫКВЕННЫЙ ЛАТТЕ» (v36).
   Ночь — стакан кофе с молоком #2B2018 и кремовый текст, день — кремовый латте
   #F7EDE0 с эспрессо-текстом. Акцент один: карамель (--violet) для подписей,
   ссылок и номерков стихов, латте-карамель (--lime) для кнопок, жжёный сахар
   (--cinnabar) для «удалить/осторожно». Пять слоёв подсветки в читалке: тыква,
   жжёный сахар, карамель, шалфей, сланец. Никаких рамок — только цвет и мягкая
   тень, крупные строчные заголовки, маленькие ВЕРХНИЕ мета-лейблы.
   Состав: milk #FFFBF5 · foam #EFE2CE · pumpkin #F2C586 · caramel #E3BE96 ·
   latte-caramel #C98A4E · burnt sugar #E58A5F · cinnamon #B9784A · espresso #2A1710 ·
   эспрессо-фон ночи #1E1510 · кофе с молоком (карточки) #30231A.
   Имена переменных остались старыми (--violet/--lime/--lav/--cream), поэтому
   вся палитра правится в двух блоках ниже: :root и html[data-theme=light].
   ========================================================================== */
:root {
  /* «Тыквенный латте», ночь: стакан кофе с молоком. Набор ролей тот же, что был у
     фиолета с лаймом, имена переменных оставлены старыми, чтобы не переписывать 600
     строк: --violet = карамель (акцентный текст), --lime = латте-карамель (кнопки),
     --lav = молочная пена, --cream = песочная крошка, --esp = эспрессо (текст на светлом). */
  --void: #1B130E;   /* эспрессо: фон глубокий, чтобы карточки читались рельефом */
  --surf: #3B2C23;   /* кофе с молоком: светлее фона в 2.6 раза — карточки выпуклые */
  --surf-2: #493728;
  --lav: #EFE2CE;
  --violet: #E3BE96;   /* песочная карамель для подписей, цифр и номерков — без кислотного блеска */
  --lime: #C98A4E;   /* кнопка ночи: приглушённая карамель, эспрессо-текст 5.9:1 */
  --cream: #F7E3C6;
  --tx: #F7EDE1;
  --tx-2: #DCC5AE;
  --tx-3: #BCA085;
  --acc: var(--violet);
  --esp: #2A1710;   /* текст на песке и креме: они светлые в обеих темах */
  --hi-a: #7E4218; --hi-b: #34170A;   /* плашка «стих дня»: тыква → кофе, текст кремовый */
  /* цвет ТЕКСТА на карамели (--lime): ночью эспрессо, днём крем */
  --on-lime: #2A1710;
  --radius: 28px;
  --r-sm: 18px;
  --r-pill: 999px;
  --shadow: 0 26px 60px -22px rgba(30, 16, 6, .8), 0 3px 14px -6px rgba(30, 16, 6, .55);
  --shadow-sm: 0 12px 30px -14px rgba(30, 16, 6, .6);
  --disp: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --ui: 'Golos Text', system-ui, sans-serif;
  --read: 'Literata', Georgia, serif;
  --rail: 76px;
  --pad: 24px;
  --read-size: 19px;
  --read-lead: 1.8;
  --read-max: 42rem;
  --grain: .06;
  /* старые имена -> новые (совместимость с разметкой JS) */
  --paper: var(--void);
  --paper-2: var(--surf);
  --paper-3: var(--surf-2);
  --ink: var(--tx);
  --ink-2: var(--tx-2);
  --ink-3: var(--tx-3);
  --line: rgba(247, 237, 225, .16);
  --line-strong: rgba(247, 237, 225, .32);
  /* «опасно» и «разбор есть» — терракота/охра, а не кричащий красный */
  --cinnabar: #E58A5F;   /* «удалить» — жжёный сахар светлее текста: на кофе 5.6:1 */
  --ochre: #E3BE96;
  --brand-font: var(--disp);
  --ui-font: var(--ui);
  --read-font: var(--read);
  --r: var(--r-sm);
  /* пять слоёв подсветки: золото, терракота, охра, шалфей, сланец —
     как карандаши на полях книжного Библии, а не флаеры */
  /* пять слоёв — разной семьи, чтобы различались даже под 30% прозрачностью:
     золото, кирпич, олива, шалфей, сланец */
  --mark-hl: #F2C586;   /* тыква */
  --mark-cin: #D9724A;  /* жжёный сахар */
  --mark-och: #E3A15C;  /* карамель */
  --mark-mint: #A8B58C; /* шалфей */
  --mark-sky: #8FABBF;  /* сланец */
  --mark-ink: #E3BE96;   /* номерок стиха — песочной карамелью по кофе */
  color-scheme: dark;
}
html[data-theme=light] {
  /* день: кремовый латте — молоко, корица и карамелизированный сахар */
  --void: #F5E9D8;   /* бежевый латте */
  --surf: #FFFCF7;   /* крем */
  --surf-2: #EFE0C9; /* песок */
  --lav: #B9784A;
  --violet: #8F4E16;
  --lime: #A25B1F;   /* кнопка дня: та же карамель, на тон темнее ночной — крем 4.9:1 */
  --cream: #F6E2C2;
  --tx: #3A2517;
  --tx-2: #67513D;
  --tx-3: #6B5340;
  --on-lime: #FFF6EC;
  --esp: #2A1710;
  --hi-a: #6E3A12; --hi-b: #331806;   /* и днём плашка достаточно тёмная под кремовым текстом */
  --ochre: #8F4E16;
  --line: rgba(58, 37, 23, .14);
  --line-strong: rgba(58, 37, 23, .26);
  --cinnabar: #A94F1F;
  --shadow: 0 22px 48px -18px rgba(124, 70, 26, .3), 0 2px 10px -4px rgba(124, 70, 26, .18);
  --grain: .035;
  --mark-ink: #8F4E16;   /* днём номерок — корица по крему */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* случайный двойной тап не должен приближать страницу: pan/pinch-жесты остаются,
   отключается только «double-tap to zoom» (и пропадает 300ms задержка клика) */
html, body, * { touch-action: manipulation; }
body {
  background: var(--void);
  color: var(--tx);
  font-family: var(--ui);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
/* атмосфера: органические пятна на фоне, как в референсах */
body::before, body::after {
  content: ''; position: fixed; pointer-events: none; z-index: 0; filter: blur(2px);
  opacity: .5;
}
body::before {
  width: 62vmax; height: 52vmax; left: -22vmax; top: -18vmax;
  background: radial-gradient(closest-side, rgba(150, 84, 36, .42), transparent 70%);
  border-radius: 46% 54% 62% 38% / 52% 44% 56% 48%;
}
body::after {
  width: 48vmax; height: 44vmax; right: -18vmax; bottom: -16vmax;
  background: radial-gradient(closest-side, rgba(233, 178, 115, .12), transparent 70%);
  border-radius: 58% 42% 38% 62% / 44% 56% 44% 56%;
}
html[data-theme=light] body::before { background: radial-gradient(closest-side, rgba(226, 164, 90, .32), transparent 70%); }
#grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 91; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--acc); text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.ic { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--on-lime); }

/* ---------------- безопасная зона «чёлки» и статус-бара ---------------- */
.safe-top { padding-top: max(var(--sat), 10px); }
html { --sat: env(safe-area-inset-top); }
.main { padding-top: calc(var(--sat) + 6px); }
.rail { padding-top: calc(14px + var(--sat)); }
.sheet { padding-top: calc(22px + var(--sat)); }
.vrail .hint#vrailHint { align-self: center; }

/* ---------------- каркас ---------------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); position: relative; z-index: 1; }
.rail {
  position: sticky; top: 0; height: 100vh; width: var(--rail);
  background: linear-gradient(180deg, var(--surf) 0%, color-mix(in srgb, var(--surf) 70%, var(--void)) 100%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 16px;
  border-top-right-radius: 34px; border-bottom-right-radius: 34px; box-shadow: var(--shadow-sm);
}
.rail .logo {
  font-family: var(--disp); font-weight: 900; font-size: 15px; letter-spacing: -.05em;
  background: var(--lime); color: var(--on-lime); width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 15px 15px 15px 5px; margin-bottom: 14px;
}
.railbtn {
  width: 46px; height: 48px; display: grid; place-items: center; position: relative;
  color: var(--tx-3); border-radius: 16px; transition: .18s cubic-bezier(.2, .8, .3, 1);
}
.railbtn:hover { color: var(--tx); background: var(--surf-2); }
.railbtn[aria-current=true] { color: var(--on-lime); background: var(--lime); }
.railbtn[aria-current=true]:hover { background: var(--lime); color: var(--on-lime); }
.rail .spacer { flex: 1; min-height: 10px; }
.rail .tip {
  position: absolute; left: 56px; top: 50%; transform: translateY(-50%) translateX(-4px); opacity: 0;
  background: var(--tx); color: var(--void); font-size: 12px; font-weight: 600; padding: 5px 10px;
  white-space: nowrap; pointer-events: none; transition: .16s; z-index: 20; border-radius: 10px;
}
.railbtn:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.main { min-width: 0; padding: 0 var(--pad) 72px; }
.doc { max-width: 1180px; margin: 0 auto; position: relative; }
.footnote { margin: 44px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--tx-3); font-size: 13px; }
.footnote b { color: var(--tx-2); font-weight: 600; }

/* ---------------- шапка главы ---------------- */
.mast { padding: 26px 0 2px; position: relative; }
.mast .numeral {
  z-index: 0;
  position: absolute; right: 4px; top: 4px; font-family: var(--disp); font-weight: 900;
  font-size: clamp(74px, 12vw, 140px); line-height: 1; letter-spacing: -.08em; color: var(--lav);
  opacity: .07; pointer-events: none;
}
.eyebrow {
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lime); margin: 0 0 8px;
}
html[data-theme=light] .eyebrow { color: var(--violet); }
.mast h1 {
  font-family: var(--disp); font-weight: 700; font-size: clamp(28px, 5.6vw, 50px); line-height: 1.1;
  letter-spacing: -.045em; margin: 0 0 12px; text-transform: lowercase;
}
.mast h1 .ch { color: var(--tx-3); font-weight: 500; }
.subline { color: var(--tx-2); max-width: 62ch; margin: 0 0 16px; font-size: 15.5px; text-wrap: pretty; }
.masttools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.chip {
  border: 0; background: var(--surf); color: var(--tx-2); border-radius: var(--r-pill);
  padding: 8px 15px; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-sm); transition: .15s;
}
.chip:hover { background: var(--surf-2); color: var(--tx); transform: translateY(-1px); }
.chip.on { background: var(--lav); color: var(--esp); }
html[data-theme=light] .chip.on { background: var(--violet); color: #FFF7EC; }
.chip.ghost { background: none; box-shadow: none; color: var(--tx-3); }
.chip.ghost:hover { color: var(--tx); background: var(--surf); }
.chip.acc { background: var(--lime); color: var(--on-lime); font-weight: 700; }
.chip.acc:hover { background: var(--cream); color: var(--esp); }
.chip.on::before { content: '✓'; margin-right: 6px; font-weight: 900; }

/* ---------------- читалка ---------------- */
.reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
@media (min-width: 1020px) { .reader:not(.solo2) { grid-template-columns: minmax(0, 1fr) 340px; gap: 26px 30px; } }
.reader.solo2 .textcol { margin: 0 auto; }
.textcol { max-width: var(--read-max); min-width: 0; }
.layerstrip { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.passage {
  font-family: var(--read); font-size: var(--read-size); line-height: var(--read-lead);
  background: var(--surf); border-radius: var(--radius); padding: 26px 27px; box-shadow: var(--shadow);
  margin-top: 8px; position: relative;
}
.passage .lbl {
  font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tx-3); display: block; margin-bottom: 10px;
}
.passage.modern { background: var(--surf-2); }
.passage.child { background: linear-gradient(135deg, var(--cream), #FBF0DC); color: var(--esp); font-size: 18px; }
.passage.child .lbl { color: #97501C; }
.passage + .passage { margin-top: 12px; }

.v { padding: 1px 2px; border-radius: 6px; cursor: pointer; transition: background .13s; }
.v:hover { background: rgba(233, 178, 115, .14); }
.v.sel { background: rgba(233, 178, 115, .2); }
.vn {
  font-family: var(--ui); font-size: .56em; font-weight: 800; color: var(--mark-ink);
  vertical-align: baseline; position: relative; top: -.55em; margin: 0 .3em 0 .12em;
}
html[data-theme=light] .vn { color: var(--mark-ink); }
.notebtn { font-family: var(--ui); font-size: .6em; vertical-align: .3em; margin-left: .2em; color: var(--lime); }
.m-hl { background: color-mix(in srgb, var(--mark-hl) 34%, transparent); }
.m-cin { background: color-mix(in srgb, var(--mark-cin) 38%, transparent); }
.m-och { background: color-mix(in srgb, var(--mark-och) 34%, transparent); }
.m-mint { background: color-mix(in srgb, var(--mark-mint) 30%, transparent); }
.m-sky { background: color-mix(in srgb, var(--mark-sky) 32%, transparent); }
.m-und { box-shadow: inset 0 -2px 0 var(--mark-ink); }
.dropcap::first-letter {
  font-family: var(--disp); font-weight: 900; font-size: 3.1em; line-height: .82; float: left;
  padding: .04em .12em 0 0; color: var(--lime);
}
.inline-note {
  display: block; font-family: var(--ui); font-size: 14px; line-height: 1.55; background: var(--surf-2);
  color: var(--tx-2); padding: 12px 14px; margin: 10px 0 14px; border-radius: var(--r-sm);
  border-left: 3px solid var(--lime); font-style: normal;
}
.inline-note summary { cursor: pointer; color: var(--tx); font-weight: 600; font-size: 13px; }
.chapend { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.chapend .endline { display: flex; align-items: center; gap: 12px; color: var(--tx-3); }
.chapend .endline::before, .chapend .endline::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.chapend .endline .hint { white-space: nowrap; }
.chapnav { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 701px) {
  .chapnav { justify-content: space-between; }
  .chapnav #endTop { margin: 0 auto; }
}
@media (max-width: 700px) {
  /* на телефоне: «назад» и «вперёд» — две равные крупные кнопки, между ними мелкий «↑ начало» */
  .chapnav { align-items: center; }
  .chapnav #endPrev, .chapnav #endNext { flex: 1 1 0; min-height: 46px; font-size: 13px; }
  .chapnav #endTop { order: 3; flex: 1 1 100%; justify-content: center; padding: 6px; }
}

/* ---------------- карточки разбора ---------------- */
.side { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1020px) { .side { position: sticky; top: 18px; } }
.card { background: var(--surf); border-radius: var(--radius); padding: 21px 23px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.card.hi { background: linear-gradient(140deg, var(--hi-a), var(--hi-b) 66%); color: #F7EAD2; }
.card.hi .hint, .card.hi .q { color: rgba(247, 230, 205, .8); }
.card.hi h3 { color: var(--cream); }
.card.hi h3::after { background: rgba(247, 230, 205, .25); }
.card h3 {
  font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 10px; color: var(--violet); display: flex; align-items: center; gap: 10px;
}
html[data-theme=light] .card h3 { color: var(--violet); }
.card h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.card p, .card li { font-size: 15px; color: var(--tx-2); }
.card > p:first-of-type { color: var(--tx); }
.list { margin: 0; padding-left: 18px; }
.list li { margin: 4px 0; }
.idea { font-family: var(--read); font-size: 17px; line-height: 1.58; color: var(--tx) !important; font-style: italic; text-wrap: pretty; }
.q { border-left: 2.5px solid var(--violet); padding-left: 12px; margin: 10px 0; font-size: 15px; color: var(--tx) !important; }
.hard { background: color-mix(in srgb, var(--lime) 12%, var(--surf-2)); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14.5px; color: var(--tx) !important; }
.tagrow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.empty, .slim { font-size: 14.5px; color: var(--tx-3); }
.empty { font-style: italic; }
.card.plain { background: color-mix(in srgb, var(--surf) 55%, transparent); box-shadow: none; border: 1px dashed var(--line-strong); }
.cite { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--violet); }

/* ---------------- панель стиха ---------------- */
.vrail {
  position: fixed; z-index: 60; visibility: hidden; left: 50%; transform: translate(-50%, 16px); bottom: 20px;
  width: min(620px, calc(100vw - 20px)); background: color-mix(in srgb, var(--surf) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 15px;
  opacity: 0; pointer-events: none; transition: .24s cubic-bezier(.2, .8, .3, 1); border: 1px solid var(--line);
}
.vrail.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.vrail .vhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.vrail .vref { font-family: var(--disp); font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.vrail .vquote { font-family: var(--read); font-size: 13.5px; color: var(--tx-3); line-height: 1.45; max-height: 3.2em; overflow: hidden; }
.vrail .close { font-size: 22px; line-height: 1; color: var(--tx-3); padding: 2px 6px; }
.markrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sw { width: 28px; height: 28px; border-radius: 10px; border: 2px solid transparent; transition: .14s; }
.sw:hover { transform: translateY(-2px) scale(1.06); }
.sw[data-mark=hl] { background: var(--mark-hl); }
.sw[data-mark=cin] { background: var(--mark-cin); }
.sw[data-mark=och] { background: var(--mark-och); }
.sw[data-mark=mint] { background: var(--mark-mint); }
.sw[data-mark=sky] { background: var(--mark-sky); }
.sw[data-mark=und] { background: repeating-linear-gradient(transparent 0 9px, var(--lime) 9px 12px); }
.sw[aria-pressed=true] { border-color: var(--tx); }
.vrail .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.vrail .acts button {
  font-size: 12.5px; font-weight: 600; color: var(--tx); background: var(--surf-2);
  padding: 8px 13px; border-radius: var(--r-pill);
}
.vrail .acts button:hover { background: var(--lime); color: var(--on-lime); }

/* ---------------- листы ---------------- */
.scrim { position: fixed; inset: 0; background: rgba(24, 14, 6, .72); backdrop-filter: blur(4px); z-index: 70; opacity: 0; pointer-events: none; transition: .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 80; visibility: hidden; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: min(760px, 100vw); max-height: 88vh; overflow: auto; background: var(--void);
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow); padding: 22px var(--pad) 34px;
  transition: .28s cubic-bezier(.2, .8, .3, 1); border-top: 1px solid var(--line);
}
.sheet.on { visibility: visible; transform: translate(-50%, 0); }
@media (min-width: 780px) {
  .sheet { bottom: 50%; border-radius: var(--radius); border: 1px solid var(--line); transform: translate(-50%, 50%) scale(.97); }
  .sheet.on { transform: translate(-50%, 50%) scale(1); visibility: visible; }
}
.sheet h2 { font-family: var(--disp); font-size: 21px; font-weight: 700; letter-spacing: -.035em; margin: 0 0 6px; text-transform: lowercase; }
.sheet h2 + p { margin: 0 0 16px; color: var(--tx-3); font-size: 14px; }
.sheethead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.x { font-size: 26px; line-height: 1; color: var(--tx-3); padding: 4px 8px; }
.x:hover { color: var(--tx); }
.grid-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; margin-top: 14px; }
.bk { text-align: left; background: var(--surf); padding: 13px 15px; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); transition: .15s; }
.bk:hover { transform: translateY(-2px); background: var(--surf-2); }
.bk b { display: block; font-family: var(--disp); font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.bk span { font-size: 11.5px; color: var(--tx-3); }
.chapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin-top: 14px; }
.cg { background: var(--surf); height: 42px; border-radius: 13px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: .13s; }
.cg:hover { background: var(--lav); color: var(--esp); }
.cg.done { background: var(--lime); color: var(--on-lime); }
.field { display: grid; gap: 6px; margin: 13px 0; }
.field label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); font-weight: 700; }
.field input, .field textarea, .field select {
  background: var(--surf); border: 0; border-radius: var(--r-pill); padding: 13px 18px; width: 100%;
  font-family: var(--ui); font-size: 15px; box-shadow: inset 0 0 0 1px var(--line);
}
/* многострочным полям пиля не к лицу: на iOS Safari текст углы срезает */
.field textarea { border-radius: 20px; padding: 15px 17px; line-height: 1.6; resize: vertical; min-height: 132px; }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 2px var(--violet); outline: none; }
.btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; background: var(--lime); color: var(--on-lime); border-radius: var(--r-pill); padding: 12px 20px; font-weight: 700; font-size: 14.5px; box-shadow: var(--shadow-sm); transition: .15s; }
.btn:hover { transform: translateY(-2px); background: var(--cream); }
.btn.ghost { background: var(--surf); color: var(--tx); }
.btn.ghost:hover { background: var(--surf-2); }
.row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.note { font-size: 13.5px; color: var(--tx-2); background: var(--surf); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 14px; }
.warn { background: color-mix(in srgb, var(--mark-och) 16%, var(--surf)); }
.hint { font-size: 12.5px; color: var(--tx-3); }
.kbd { border: 1px solid var(--line-strong); padding: 1px 6px; border-radius: 7px; font-size: 11.5px; font-family: var(--ui); }
.divider { height: 1px; background: var(--line); margin: 20px 0; }
.sect-title { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); margin: 26px 0 10px; }
.stamp { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.stamp b { color: var(--lime); }
html[data-theme=light] .stamp b { color: var(--violet); }

/* ---------------- планы ---------------- */
.planlist { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 800px) { .planlist { grid-template-columns: 1fr 1fr; } }
.plan { background: var(--surf); padding: 23px 24px; border-radius: var(--radius); position: relative; overflow: hidden; box-shadow: var(--shadow); }
.plan::after {
  content: ''; position: absolute; width: 190px; height: 170px; right: -70px; top: -60px; opacity: .14;
  background: var(--lime); border-radius: 46% 54% 62% 38% / 52% 44% 56% 48%;
}
.plan.year::after { background: var(--violet); width: 250px; height: 210px; opacity: .1; }
.plan h3 { font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -.035em; margin: 0; position: relative; z-index: 1; text-transform: lowercase; }
.plan .kicker { font-family: var(--read); font-style: italic; color: var(--tx-2); font-size: 15px; margin: 4px 0 12px; position: relative; z-index: 1; }
.plan .meta { font-size: 12.5px; color: var(--tx-3); display: flex; gap: 12px; margin-bottom: 10px; position: relative; z-index: 1; }
.plan .row, .plan .todays { position: relative; z-index: 1; }
.todays { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 10px; }
.d { width: 26px; height: 26px; font-size: 11px; font-weight: 700; border-radius: 9px; background: var(--surf-2); color: var(--tx-2); transition: .13s; }
.d:hover { transform: translateY(-2px); }
.d.ok { background: var(--lime); color: var(--on-lime); }
.d.cur { box-shadow: 0 0 0 2.5px var(--violet); }
.donut { position: absolute; right: 14px; bottom: 12px; width: 76px; height: 76px; opacity: .9; }

/* календарь года */
.months { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0 4px; }
.month { padding: 8px 14px; border-radius: var(--r-pill); background: var(--surf); font-size: 12.5px; font-weight: 600; color: var(--tx-2); }
.month.on { background: var(--lav); color: var(--esp); }
.html[data-theme=light] .month.on { color: #fff; }
.cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 12px; margin-top: 16px; }
.day-card { background: var(--surf); border-radius: var(--r-sm); padding: 14px 15px; text-align: left; box-shadow: var(--shadow-sm); position: relative; transition: .15s; }
.day-card:hover { transform: translateY(-3px); background: var(--surf-2); }
.day-card .num { font-family: var(--disp); font-size: 22px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--tx); }
.day-card .rd { font-size: 12.5px; color: var(--tx-2); margin-top: 6px; font-family: var(--read); line-height: 1.4; }
.day-card .pr { display: flex; gap: 4px; margin-top: 9px; }
.day-card .pr i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.day-card .pr i.on { background: var(--lime); }
.day-card.done { background: linear-gradient(140deg, color-mix(in srgb, var(--lime) 26%, var(--surf)), var(--surf)); }
.day-card.today { box-shadow: 0 0 0 2.5px var(--violet), var(--shadow); }
.day-card .tb { position: absolute; right: 12px; top: 12px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); font-weight: 700; }

/* ---------------- «моё» ---------------- */
.libgroups { display: grid; gap: 24px; margin-top: 16px; }
.item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--surf); padding: 15px 17px; border-radius: 20px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.item .r { font-family: var(--disp); font-size: 12.5px; font-weight: 600; color: var(--violet); letter-spacing: -.01em; }
.item .t { font-family: var(--read); font-size: 15px; color: var(--tx); }
.item .n { font-size: 12.5px; color: var(--tx-3); margin-top: 2px; }
.searchbar { display: flex; gap: 9px; margin-top: 14px; }
.searchbar input { flex: 1; background: var(--surf); border: 0; border-radius: var(--r-pill); padding: 13px 18px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }
.stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-top: 18px; }
.stat > div { background: var(--surf); border-radius: var(--r-sm); padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.stat b { font-family: var(--disp); font-size: 25px; font-weight: 800; display: block; letter-spacing: -.05em; color: var(--lime); }
html[data-theme=light] .stat b { color: var(--violet); }
.stat span { font-size: 11.5px; color: var(--tx-3); }

/* ---------------- ассистент ---------------- */
/* Экран — колонка ровно на доступную высоту вьюпорта: лента скроллится сама,
   поле ввода всегда последней строкой над нижней панелью, мёртвой зоны под ним нет. */
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 0 12px; display: grid; gap: 13px; align-content: start; }
.askbar { flex: 0 0 auto; display: flex; gap: 9px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--line); }
/* --ask-chrome = верхний + нижний отступ .main (синхронизировано с медиа-правилами ниже) */
:root { --ask-chrome: 78px; }
#view[data-screen=ask] { display: flex; flex-direction: column; height: calc(100vh - var(--sat) - var(--ask-chrome) - env(safe-area-inset-bottom)); height: calc(100dvh - var(--sat) - var(--ask-chrome) - env(safe-area-inset-bottom)); }
#view[data-screen=ask] .mast, #view[data-screen=ask] .chatbar { flex: 0 0 auto; }
#view[data-screen=ask] .chat { flex: 1 1 auto; }
/* ответов раньше хватало на 74ch, и на широком экране справа от ленты зияла пустота,
   а поле ввода при этом было во всю колонку; теперь лента и ввод одной ширины */
#view[data-screen=ask] { width: var(--ask-col); max-width: 100%; margin-inline: auto; }
/* шапка ассистента — только заголовок: описание убрали из разметки, и эти строки
   добирают высвобожденные ~90px обратно ленте ответов */
#view[data-screen=ask] .mast { padding: 4px 0 0; }
#view[data-screen=ask] .mast h1 { font-size: clamp(19px, 3.2vw, 25px); margin: 0 0 6px; }
#view[data-screen=ask] .chatbar { margin: 0 0 2px; }
:root { --ask-col: 90ch; }                              /* ≈ 920px: заметно шире прежних 74ch */
@media (min-width: 1500px) { :root { --ask-col: 104ch; } }
.msg { max-width: 100%; }
.msg.you { max-width: 88%; margin-left: auto; }         /* свои реплики чуть короче ответа */
.msg .who { font-family: var(--ui); font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 5px; }
.msg.you { justify-self: end; }
.msg.you .who { text-align: right; }
.msg .b { background: var(--surf); padding: 15px 18px; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); font-size: 15.5px; line-height: 1.66; border-radius: 22px 22px 22px 7px; box-shadow: var(--shadow-sm); }
.msg.you .b { background: var(--lav); color: var(--esp); border-radius: 22px 22px 7px 22px; }
html[data-theme=light] .msg.you .b { background: var(--surf-2); color: var(--tx); }
.msg .b p { margin: 0 0 10px; color: var(--tx-2); }
.msg .b p:first-child { color: var(--tx); }
.msg .b p:last-child { margin: 0; }
.msg details { margin-top: 8px; font-size: 13px; color: var(--tx-3); }
.askbar textarea { flex: 1; background: var(--surf); border: 0; border-radius: 20px; padding: 13px 16px; resize: none; max-height: 140px; font-size: 15.5px; box-shadow: inset 0 0 0 1px var(--line); }
.ctxline { font-size: 12.5px; color: var(--tx-3); }
.ctxline b { color: var(--violet); }
.typing i { display: inline-block; width: 5px; height: 5px; background: var(--tx-3); border-radius: 50%; margin-right: 3px; animation: bl 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes bl { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.rangelimit { font-size: 12.5px; color: var(--mark-och); }

/* ---------------- мобильная навигация ---------------- */
.mobiletabs { display: none; }
@media (max-width: 700px) {
  :root { --pad: 16px; --radius: 22px; --r-sm: 16px; }
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .mobiletabs {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
    background: color-mix(in srgb, var(--surf) 88%, transparent); backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px -18px rgba(20, 12, 6, .8);
    border-radius: 26px 26px 0 0;
  }
  .mobiletabs button { padding: 8px 1px 7px; font-size: 9.5px; font-weight: 600; color: var(--tx-3); display: grid; justify-items: center; gap: 3px; border-radius: 16px; min-width: 0; overflow: hidden; }
  .mobiletabs button svg { width: 19px; height: 19px; }
  .mobiletabs button[aria-current=true] { color: var(--on-lime); background: var(--lime); }
   /* на телефоне каждая строка ответа на вес цены: лента выходит за поля .main
      на 8px с каждой стороны, пузырь плотнее — это ~два лишних слова в строке */
   #view[data-screen=ask] { margin-inline: -8px; width: auto; max-width: none; }
   #view[data-screen=ask] .msg .b { padding: 13px 14px; border-radius: 18px 18px 18px 6px; }
   #view[data-screen=ask] .msg.you .b { border-radius: 18px 18px 6px 18px; }
   #view[data-screen=ask] .askbar textarea { padding: 12px 14px; }
  /* панель диалогов в одну строку и компактнее: ещё ~30px ленте */
  #view[data-screen=ask] .chatbar { display: flex; align-items: center; gap: 7px; }
  #view[data-screen=ask] .chatbar .hint { display: none; }
  #view[data-screen=ask] .chatbar .chip { padding: 6px 12px; font-size: 12px; }
  .main { padding-bottom: 108px; }
  .vrail { bottom: 88px; border-radius: 22px; }
  .passage { padding: 18px 17px; }
  .item { grid-template-columns: 72px minmax(0, 1fr); }
  .item > .chip { grid-column: 2; justify-self: start; }
  .mast .numeral { font-size: 92px; }
}

/* ---------------- загрузка / появление ---------------- */
.skeleton { display: grid; gap: 12px; margin-top: 22px; }
.sk { height: 15px; border-radius: 99px; background: linear-gradient(90deg, var(--surf), var(--surf-2), var(--surf)); background-size: 300% 100%; animation: sh 1.15s linear infinite; }
@keyframes sh { to { background-position: -300% 0; } }
.reveal > * { animation: rise .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .reveal > *, .sk { animation: none; } * { transition-duration: .01ms !important; } }

/* установка как приложения */
.install { display: inline-flex; align-items: center; gap: 8px; }
.ios-hint { font-size: 12.5px; color: var(--tx-3); }
.installwrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; }
.main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.off { opacity: .55; }

/* ---------------- план на год ---------------- */
.months { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px; }
.month { padding: 9px 15px; border-radius: var(--r-pill); background: var(--surf); font-size: 12.5px; font-weight: 600; color: var(--tx-2); box-shadow: var(--shadow-sm); }
.month:hover { color: var(--tx); transform: translateY(-1px); }
.month.on { background: var(--lime); color: var(--on-lime); }
/* счётчик в активном месяце наследовал --tx-2 и тонул на загаре */
.month.on span, .month.on .st { color: inherit; opacity: .82; }
html[data-theme=light] .month.on { background: var(--violet); color: #FFF7EC; }
.cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 14px; margin-top: 16px; align-items: stretch; }
.day-card { display: grid; gap: 9px; text-align: left; background: var(--surf); border-radius: 20px; padding: 17px 18px 15px; box-shadow: var(--shadow-sm); position: relative; transition: .15s cubic-bezier(.2, .8, .3, 1); }
.day-card:hover { transform: translateY(-3px); background: var(--surf-2); }
.day-card .num { font-family: var(--disp); font-size: 27px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.day-card .rd { font-family: var(--read); font-size: 13.5px; color: var(--tx-2); line-height: 1.45; }
.day-card .pr { display: flex; gap: 5px; }
.day-card .pr i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.day-card .pr i.on { background: var(--lime); }
.day-card.done { background: linear-gradient(150deg, color-mix(in srgb, var(--lime) 22%, var(--surf)), var(--surf) 70%); }
.day-card.done .rd { color: var(--tx); }
.day-card.today { box-shadow: 0 0 0 2.5px var(--violet), var(--shadow); }
.day-card .tb { position: absolute; right: 13px; top: 13px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); font-weight: 700; }
.day-card.today .tb { color: var(--lime); }

.sw-tick { width: 26px; height: 26px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 2px var(--line-strong); display: block; transition: .14s; }
.sw-tick:hover { box-shadow: inset 0 0 0 2px var(--lime); }
.sw-tick.on { background: var(--lime); box-shadow: none; position: relative; }
.sw-tick.on::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-lime); font-size: 14px; font-weight: 900; }
#sheet .item .r { display: flex; align-items: center; }
#sheet .item:first-of-type { border-top: 0; }

.planbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surf); border-radius: var(--r-pill); padding: 9px 16px; box-shadow: var(--shadow-sm); margin-bottom: 14px; max-width: var(--read-max); }
.planbar b { font-family: var(--disp); font-size: 12.5px; letter-spacing: -.01em; }
.planbar .done { color: var(--lime); font-weight: 700; }
.calhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 2px 0; }
.day-card .pr { align-items: center; }
.day-card .pr span.hint { font-size: 11px; }
.v.rng { background: color-mix(in srgb, var(--lav) 14%, transparent); box-shadow: inset 2px 0 0 var(--violet); }
html[data-theme=light] .v.rng { background: color-mix(in srgb, var(--violet) 8%, transparent); }
.v.out { opacity: .42; }
.v.out:hover { opacity: 1; }

@media (max-width: 700px) {
  .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  :root { --ask-chrome: 86px; }
  /* плашка установки — только на «Главной»: на других экранах она повисала в пустоте над панелью */
  .installwrap { display: none; }
  #view[data-screen=home] ~ .installwrap { display: flex; }
  /* на телефоне экран ассистента тоже растягиваем на всю высоту: композер над нижней панелью, пустоты нет */
  /* мягкая подсказка, что внизу ещё есть контент под панелью */
  .mobiletabs::before {
    content: ''; position: absolute; left: 0; right: 0; top: -34px; height: 34px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surf) 92%, transparent));
    pointer-events: none;
  }
  .day-card { gap: 7px; padding: 15px 16px 14px; }
  .day-card .num { font-size: 23px; }
  .subline { font-size: 16px; line-height: 1.62; }
  .mast .numeral { opacity: .055; font-size: 104px; top: 2px; }
  .vrail .acts button { padding: 9px 12px; }
  .month { padding: 8px 12px; font-size: 12px; }
}

@media (max-width: 700px) {
  :root { --read-size: 18px; --read-lead: 1.72; }
  .passage { padding: 19px 17px; }
  .vn { margin-right: .42em; }
  .v { word-spacing: .02em; }
  .masttools .chip { padding: 7px 12px; font-size: 12px; }
}

/* карточки дней плана: читаемый статус */
.day-card .tb { font-size: 9.5px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--surf-2); top: 11px; }
.day-card.today .tb { background: var(--lime); color: var(--on-lime); }
.day-card.late .tb { background: color-mix(in srgb, var(--mark-och) 30%, var(--surf-2)); color: var(--mark-och); }
.day-card.late { box-shadow: inset 3px 0 0 var(--mark-och), var(--shadow-sm); }
.day-card .pr { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.day-card .dots { display: flex; gap: 5px; }
.day-card .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.day-card .dots i.on { background: var(--lime); }
.day-card .st { font-size: 12.5px; color: var(--tx-2); font-weight: 600; }
.day-card .num { font-size: 25px; }
.day-card .rd { font-size: 14.5px; line-height: 1.5; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* контраст статусов в тёмной теме (она основная) */
html[data-theme=dark] .day-card .dots i { background: rgba(242, 234, 224, .3); }
html[data-theme=dark] .day-card .dots i.on { background: var(--lime); }
html[data-theme=dark] .day-card .st { color: var(--tx); font-weight: 600; }
html[data-theme=dark] .day-card .rd { color: var(--tx); }
html[data-theme=dark] .day-card .tb { background: var(--surf-2); color: var(--tx); }
html[data-theme=dark] .day-card.late .tb { background: var(--mark-och); color: var(--esp); }
html[data-theme=dark] .day-card.late { box-shadow: inset 3px 0 0 var(--mark-och), var(--shadow-sm); }
html[data-theme=dark] .day-card.done .tb { background: var(--lime); color: var(--on-lime); }
html[data-theme=dark] .hint { color: var(--tx-2); }
html[data-theme=dark] .month:not(.on) { color: var(--tx); }
html[data-theme=dark] .month:not(.on) .st, html[data-theme=dark] .month:not(.on) span { color: var(--tx-2); }

/* панель стиха не должна лежать на тексте при чтении: прячем при прокрутке вниз */
.vrail.tuck { opacity: 0; transform: translate(-50%, 18px); pointer-events: none; }
.mast h1 { padding-right: clamp(52px, 16vw, 132px); }
@media (max-width: 700px) { .mast .numeral { right: 0; top: 6px; } }

/* «не дочитано» держим в палитре: фиолет, а не оранжевый */
.day-card.late { box-shadow: inset 3px 0 0 var(--violet), var(--shadow-sm); }
.day-card.late .tb { background: var(--violet); color: #FFF7EC; }
html[data-theme=light] .day-card.late .tb { background: var(--surf-2); color: var(--violet); }
html[data-theme=light] .day-card.late { box-shadow: inset 3px 0 0 var(--lav), var(--shadow-sm); }
.hard { background: color-mix(in srgb, var(--violet) 12%, var(--surf-2)); border-left: 3px solid var(--violet); }
html[data-theme=light] .hard { background: color-mix(in srgb, var(--violet) 8%, #fff); }

/* ---------------- главная: стих дня, прогресс ---------------- */
.verse-hero { margin-top: 18px; }
.verse-hero .vt { font-family: var(--read); font-size: clamp(19px, 2.4vw, 25px); line-height: 1.62; color: #F7EEDC; margin: 0 0 14px; text-wrap: pretty; }
.verse-hero .vrefrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.verse-hero .vcite { font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--cream); }
.verse-hero .vacts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.verse-hero .chip { background: rgba(247, 230, 205, .15); color: #F7EAD2; box-shadow: none; }
.verse-hero .chip:hover { background: rgba(247, 230, 205, .28); }
.verse-hero .chip.on { background: var(--cream); color: var(--esp); }
.verse-hero h3 { color: var(--cream); }
.verse-hero h3::after { background: rgba(247, 230, 205, .22); }
.yearbar { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.yearbar .track { flex: 1; height: 10px; border-radius: 99px; background: var(--surf-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.yearbar .fill { height: 100%; background: linear-gradient(90deg, var(--lime), var(--violet)); border-radius: 99px; transition: width .4s; }
.stat i { font-style: normal; font-size: 15px; color: var(--tx-3); font-weight: 600; }
.timeinput { background: var(--surf); border: 0; border-radius: var(--r-pill); padding: 9px 14px; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); color-scheme: dark; }
html[data-theme=light] .timeinput { color-scheme: light; }
#notifcard .row { gap: 10px; }
/* мобильный: верх страницы не должен прятаться под статус-бар */
@media (max-width: 700px) {
  .main { padding-top: calc(var(--sat) + 10px); }
  .mast { padding-top: 18px; }
}
.homefeed { display: grid; gap: 16px; margin-top: 16px; }
#view[data-screen=home] .mast { padding-bottom: 0; }

/* план на сегодня — кислотная плашка; стих дня остаётся фиолетовым */

.nameinp { flex: 1; min-width: 180px; background: var(--surf); border: 0; border-radius: var(--r-pill); padding: 12px 18px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }
.notifrow b { font-size: 15px; }
.kidcard { background: linear-gradient(140deg, var(--cream), #FBF0DC); color: var(--esp); }
.kidcard h3 { color: #97501C; }
.kidcard h3::after { background: rgba(140, 90, 34, .2); }
.kidcard .hint { color: var(--tx-3) !important; }
.pname { text-transform: capitalize; font-weight: 700; }

/* ассистент: сообщения целиком читаемые, панель диалогов */
.msg:not(.you) .b, .msg:not(.you) .b p { color: var(--tx); }
.msg:not(.you) .b .hint, .msg:not(.you) .b .slim { color: var(--tx-2); }
.chatbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 2px 0 12px; }
.chatbar .hint#chTitle { margin-left: auto; font-style: italic; }
.chatbar .chN { font-weight: 800; }

/* бренд над датой на главной */
.brand { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.brand .bname {
  font-family: var(--disp); font-weight: 900; font-size: 17px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx);
}
.brand .bdot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 22%, transparent); }

/* ==========================================================================
   v35 · текст на плашках — отдельным блоком в конце файла.
   Правила `.card p` / `.card > p:first-of-type` стоят в файле позже и на одинаковой
   специфичности перебивали цвета внутри «стиха дня» и «сегодня по плану»: на коже
   оказывался тёмный текст, на песке — светлый. Здесь финальное слово, по темам.
   ========================================================================== */
.card.hi { color: #F7EAD2; }
/* `html[data-theme=light] .card h3` специфичнее простой пары классов — дублируем
   заголовок и с ссылкой на тему, иначе в светлой теме он оставался фиолетово-коричневым */
.card.hi h3, .card.hi .vcite { color: #FBEFDC; }
html[data-theme=light] .card.hi:not(.limecard) h3, html[data-theme=light] .card.hi:not(.limecard) .vcite { color: #FBEFDC; }
.card.hi p, .card.hi li, .card.hi b, .card.hi .vt { color: rgba(247, 238, 224, .9); }
.card.hi .hint, .card.hi .q, .card.hi .slim, .card.hi .b { color: rgba(247, 238, 224, .78); }
.card.hi .chip { background: rgba(247, 230, 205, .15); color: #F7EAD2; box-shadow: none; }
.card.hi .chip:hover { background: rgba(247, 230, 205, .28); color: #FFFAF0; }
.card.hi .chip.on { background: var(--cream); color: var(--esp); }

/* «сегодня по плану»: днём — песок с чернилами, ночью — кофейная гуща с кремом,
   иначе белая карта перетягивала внимание с «стиха дня» */
html[data-theme=light] .card.hi.limecard { background: var(--cream); color: var(--esp); box-shadow: var(--shadow), inset 0 0 0 1px rgba(58, 37, 23, .1); }
html[data-theme=light] .card.hi.limecard h3, html[data-theme=light] .card.hi.limecard .vcite { color: #7A3F16; }
html[data-theme=light] .card.hi.limecard p, html[data-theme=light] .card.hi.limecard li,
html[data-theme=light] .card.hi.limecard b, html[data-theme=light] .card.hi.limecard .hint,
html[data-theme=light] .card.hi.limecard .slim { color: rgba(58, 37, 23, .84); }
html[data-theme=light] .card.hi.limecard .chip { background: rgba(58, 37, 23, .1); color: var(--esp); }
html[data-theme=light] .card.hi.limecard .chip:hover { background: rgba(58, 37, 23, .2); }
html[data-theme=light] .card.hi.limecard .chip.on { background: var(--esp); color: #F7E3C6; }

html[data-theme=dark] .card.hi.limecard { background: linear-gradient(150deg, #5C4128, #402B1B); color: #F7EAD2; }
html[data-theme=dark] .card.hi.limecard h3, html[data-theme=dark] .card.hi.limecard .vcite { color: #F0CE9E; }
html[data-theme=dark] .card.hi.limecard p, html[data-theme=dark] .card.hi.limecard li,
html[data-theme=dark] .card.hi.limecard b, html[data-theme=dark] .card.hi.limecard .hint,
html[data-theme=dark] .card.hi.limecard .slim { color: rgba(247, 238, 224, .86); }
html[data-theme=dark] .card.hi.limecard .chip { background: rgba(247, 230, 205, .14); color: #F7EAD2; }
html[data-theme=dark] .card.hi.limecard .chip.on { background: var(--cream); color: var(--esp); }

/* нижняя панель на телефоне: на полупрозрачном пергаменте --tx-3 тонул */
html[data-theme=light] .mobiletabs button:not([aria-current=true]) { color: #6E5540; }
/* «не дочитано» на песочной карточке дня */
html[data-theme=light] .day-card.late .tb { color: #7A4A20; }

/* нижняя панель и панель стиха днём: были nearly-white (это 88% сурфа), садим их на пергамент */
html[data-theme=light] .mobiletabs { background: color-mix(in srgb, var(--void) 92%, transparent); box-shadow: 0 -12px 34px -20px rgba(124, 70, 26, .5); }
html[data-theme=light] .vrail { background: color-mix(in srgb, var(--void) 92%, transparent); }

/* ================= духовный дневник ================= */
.jref { color: var(--violet); border-bottom: 1.5px dotted var(--violet); cursor: pointer; font-weight: 600; text-underline-offset: 3px; border-radius: 4px; padding: 0 1px; }
.jref:hover, .jref:focus-visible { background: color-mix(in srgb, var(--violet) 16%, transparent); outline: none; }
.jref.mini { border: none; background: var(--surf-2); padding: 3px 10px; margin: 0 6px 6px 0; border-radius: var(--r-pill); font: 600 12.5px/1.6 var(--ui); display: inline-block; }
.jdet { margin-top: 4px; font-size: 12.5px; min-height: 30px; }
.jstat { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--surf); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); padding: 14px 18px; margin-top: 18px; }
.jstat > div { text-align: center; }
.jstat b { font: 800 22px/1 var(--disp); color: var(--violet); display: block; }
.jstat span { font-size: 11px; color: var(--tx-3); }
.jstrip { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; max-width: 200px; }
.jdot { width: 7px; height: 7px; border-radius: 50%; background: var(--surf-2); box-shadow: inset 0 0 0 1px var(--line); }
.jdot.on { background: var(--lime); }
.jgroup { margin-top: 22px; }
.jdate { font: 600 12.5px var(--ui); text-transform: lowercase; letter-spacing: .04em; color: var(--tx-3); margin: 0 4px 8px; }
.card.dcard { padding: 18px 20px 12px; margin-bottom: 12px; }
.dtext { white-space: pre-wrap; font-family: var(--read); font-size: 17.5px; line-height: 1.75; color: var(--tx); }
.dfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.jv { font-family: var(--read); font-size: 17px; line-height: 1.75; margin-bottom: 8px; }
.jv sup { color: var(--violet); font-weight: 700; margin-right: 4px; }
#jText { width: 100%; }

/* ---------------- открытки-цитаты (v41) ---------------- */
.cardmaker canvas { width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow-sm); display: block; background: var(--surf-2); }
.cardmaker .mkrow { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cardmaker .mkrow .chip { flex: 1 1 auto; text-align: center; }

/* ---------------- фотофоны открыток (v42) ---------------- */
.mkbg .bgi { width: 56px; height: 38px; padding: 0; background: var(--bi) center/cover no-repeat; border-radius: 11px; }
.mkbg .bgpick.on { outline: 2.5px solid var(--lime); outline-offset: 2px; }
#ths.dim { opacity: .4; }

/* ---------------- озвучка глав ---------------- */
#ttsbar {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%) translateY(-160%); z-index: 60; max-width: 94vw;
  background: color-mix(in srgb, var(--surf) 93%, transparent); backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); border-radius: 999px; padding: 7px 10px;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
#ttsbar.on { transform: translateX(-50%) translateY(0); }
#ttsbar .tt { font-size: 11.5px; color: var(--tx-3); white-space: nowrap; }
#ttsbar .ref { font: 700 12.5px var(--disp); color: var(--violet); }
#ttsbar button { min-width: 34px; height: 34px; border-radius: 999px; background: var(--surf-2); color: var(--tx); font-weight: 700; font-size: 13.5px; padding: 0 10px; }
#ttsbar button:active { transform: scale(.93); }
#ttsbar #ttsX { background: transparent; color: var(--tx-3); }
.v.spk { background: color-mix(in srgb, var(--violet) 24%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 24%, transparent); }

/* ---------------- «Моё»: полный список в окне (v43) ---------------- */
.sheetlist .item { margin-bottom: 9px; }

/* ---------------- v44: спутники (мини-планы · пять минут · дайджест · карта) ---------------- */
.companions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media (max-width: 560px) { .companions { grid-template-columns: 1fr; } }
button.comp { text-align: left; cursor: pointer; border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; transition: .15s; }
.comp b { font: 700 14.5px/1.25 var(--disp); color: var(--tx); }
.comp span { font-size: 12.5px; color: var(--tx-3); }
.comp:hover { background: var(--surf-2); border-color: var(--line-strong); }

/* мини-планы */
.themegrid { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 900px) { .themegrid { grid-template-columns: 1fr 1fr; } }
.thhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.thhead b { font: 700 16.5px/1.3 var(--disp); }
.thhead .hint { flex: 0 0 auto; }
.thsub { font-size: 14px; color: var(--tx-2); margin: 6px 0 12px; }
.thdots { display: flex; gap: 7px; }
.thdot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.thdot.on { background: var(--lime); border-color: transparent; }
.plandays { display: flex; flex-direction: column; gap: 10px; }
.pday { display: flex; gap: 12px; align-items: flex-start; background: var(--surf-2); border-radius: var(--r-sm); padding: 12px 14px; }
.pday .ck { flex: 0 0 auto; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; border: 1.6px solid var(--line-strong); background: transparent; color: transparent; font-weight: 800; font-size: 14px; cursor: pointer; }
.pday .ck.on { background: var(--lime); border-color: transparent; color: var(--esp); }
.pday-b { min-width: 0; }
.pday .pref { font: 700 14.5px/1.3 var(--ui); color: var(--violet); }
.pidea { font-size: 14.5px; color: var(--tx); margin: 5px 0 3px; }
.pask { font-size: 13.5px; color: var(--tx-2); font-style: italic; margin: 0 0 8px; }
.pday.done { opacity: .6; }

/* пять минут */
.five .fivev { font: 500 16.5px/1.6 var(--read); background: var(--surf-2); padding: 12px 14px; border-radius: var(--r-sm); margin-top: 10px; min-height: 44px; }
.five .fiveq { font-weight: 600; color: var(--tx); margin: 14px 0 8px; }
.five textarea { width: 100%; background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; color: var(--tx); font: 400 15px/1.5 var(--read); resize: vertical; }
.five textarea:focus { outline: none; border-color: var(--violet); }

/* дайджест */
.digrange { font: 500 13px/1.4 var(--ui); color: var(--tx-3); margin-top: 4px; letter-spacing: .02em; }
.digsec { margin-top: 24px; }
.digsec h3 { display: flex; align-items: center; gap: 10px; font: 700 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin: 0 0 10px; }
.digsec h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.digrow { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.digrow:last-child { border-bottom: 0; }
.digday { flex: 0 0 158px; font: 600 13px/1.4 var(--ui); color: var(--tx-3); padding-top: 8px; }
.digrefs { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.tiny { padding: 4px 11px; font-size: 12.5px; }
.digcard { margin-bottom: 10px; }
.digcard .dtext { cursor: pointer; }

/* карта и времена */
.mapwrap { margin-top: 14px; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); background-size: cover; background-position: center; position: relative; }
.mapwrap.night { background-image: url('assets/map-land-night.webp'); }
.mapwrap.day { background-image: url('assets/map-land-day.webp'); }
.mapwrap svg { display: block; width: 100%; height: auto; }
.mcity { cursor: pointer; }
.mcity:hover circle:first-child { stroke-width: 3.4; }
.citas { margin-top: 16px; }
.citag { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; font: 700 14px/1.3 var(--disp); }
.citad { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.eracard { margin-bottom: 12px; }
.erahead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.erahead b { font: 700 16px/1.3 var(--disp); }
.eratxt { margin: 8px 0 12px; }

/* ---------------- v45: интерактивная карта, ленты, вопрос по стиху, открытки в дайджесте ---------------- */
.mapwrap { position: relative; touch-action: none; }
.mapwrap svg { cursor: grab; }
.mapwrap svg:active { cursor: grabbing; }
.mapctl { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; z-index: 5; }
.mapctl button { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--void) 72%, transparent); color: var(--tx); font: 700 15px/1 var(--ui); cursor: pointer; backdrop-filter: blur(6px); }
.mapctl button:hover { background: color-mix(in srgb, var(--void) 55%, transparent); }
.mapbody { position: relative; }
.maphint { margin: 6px 2px 0; }
.mtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.chip.only { box-shadow: inset 0 0 0 2px var(--lime); color: var(--tx); }
.erasnote { font: 400 15.5px/1.65 var(--read); color: var(--tx-2); border-left: 3px solid var(--lime); padding: 2px 0 2px 14px; margin: 2px 0 18px; }
.digcard-b { padding: 4px 9px; font-size: 11px; opacity: .85; }
.pword { margin: -4px 0 4px; }
.pword .pwtxt { font: 400 15px/1.66 var(--read); color: var(--tx); border-left: 3px solid var(--violet); padding-left: 13px; margin: 12px 0; }
.pwv { font: 500 14.5px/1.6 var(--read); color: var(--tx-2); background: var(--surf); border-radius: var(--r-sm); padding: 10px 13px; margin: 4px 0 8px; }
.five .fivev:empty { display: none; }

/* описание на экране карты: на мобильном не съедает карту */
#view[data-screen="maps"] .subline-r { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 701px) { #view[data-screen="maps"] .subline-r { -webkit-line-clamp: 4; } }
.five textarea { background: var(--surf); border-color: var(--line-strong); }
.five textarea::placeholder { color: var(--tx-3); opacity: .9; }
.pword { background: var(--surf-2); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 14px; }
.jrow { margin-bottom: 2px; }
.lrow { margin: 2px 0 6px; }

/* ---------------- v46: окно на телефоне (iOS) — не тонет под таббаром и клавиатурой ---------------- */
.sheet { max-height: calc(100dvh - 24px - var(--kbd, 0px)); bottom: var(--kbd, 0px);
  padding-bottom: calc(30px + env(safe-area-inset-bottom)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (min-width: 780px) { .sheet { bottom: calc(50% + var(--kbd, 0px) / 2); } }
@media (max-width: 700px) {
  .mobiletabs { transition: transform .24s cubic-bezier(.2, .8, .3, 1); }
  body.sheeton .mobiletabs { transform: translateY(130%); }               /* окно открыто — панель вкладок не мешает */
  .vrail { bottom: calc(88px + var(--kbd, 0px)); }
}
/* #ttsbar со своим нижним краем уже справляется через .vrail-правила ниже */
/* ---------------- v46: подписи географии на карте ---------------- */
.mapwrap.night .mlabel { fill: #EFE2CE; opacity: .62; }
.mapwrap.night .mlabel-sea { fill: #C7B39A; opacity: .5; }          /* море в ночи = темный фон, подпись светлая и тихая */
.mapwrap.night .mlake { fill: rgba(20, 12, 7, .9); stroke: rgba(239, 226, 206, .28); }
.mapwrap.day .mlabel { fill: #4A3220; opacity: .75; }
.mapwrap.day .mlabel-sea { fill: #4A3220; opacity: .42; }
.mapwrap.day .mlake { fill: rgba(121, 148, 163, .5); stroke: rgba(74, 50, 32, .3); }
.mlabel { font-family: var(--ui); font-weight: 700; font-size: 21px; letter-spacing: 5px; text-transform: uppercase; pointer-events: none; paint-order: stroke; stroke: none; }
.mlabel-sea { font-style: italic; font-weight: 600; }
.mlake { stroke-width: 1.1; }

/* ---------------- v46: «слово» дня в мини-плане ---------------- */
.pdev { font: 400 15px/1.66 var(--read); color: var(--tx); margin: 6px 0 4px; }
.pdev:first-letter { color: var(--violet); font-weight: 700; }
.pday textarea { width: 100%; background: var(--surf); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 12px; color: var(--tx); font: 400 15px/1.5 var(--read); }


/* ---------------- v48: статичная страница и честный верх окон ---------------- */
html, body, * { touch-action: pan-x pan-y; }        /* iOS игнорирует user-scalable — щипок и двойной тап гасит touch-action */
input, textarea, select, .timeinput { font-size: 16px !important; }   /* iOS при 16px сама не приближает */
.sheet { padding-top: 0; }
.sheethead { position: sticky; top: 0; z-index: 5; background: var(--void);
  padding: calc(22px + var(--sat)) var(--pad) 10px; margin: 0 calc(0px - var(--pad)); }
.sheetbody { padding-top: 2px; }
/* дневник: длинные строки без ссылок не распирают карточку вправо */
.dtext { overflow-wrap: anywhere; word-break: break-word; }

/* ---------------- v48: карта — номера в точках, прилёт по тапу ---------------- */
.mnum { fill: #FFF6E8; font-weight: 800; font-family: var(--ui); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(20,12,7,.6); stroke-width: .9px; }
.mcity { cursor: pointer; }
.mhot circle:first-child { stroke: var(--cream); }
.citnum { color: var(--violet); margin-right: 2px; }


/* ---------------- v48: молитвенные нужды ---------------- */
.needslist { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.neecard { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.neecard .ck { border: 1.6px solid var(--line-strong); background: transparent; color: transparent; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; flex: 0 0 auto; cursor: pointer; }
.neecard .ck.on { background: var(--lime); border-color: transparent; color: var(--esp); }
.nee-main { min-width: 0; flex: 1; }
.nee-text { font: 500 15.5px/1.5 var(--read); color: var(--tx); cursor: text; overflow-wrap: anywhere; }
.neecard.ans { opacity: .62; }
.neecard.ans .nee-text { text-decoration: line-through; text-decoration-color: var(--violet); text-decoration-thickness: 1.5px; }
.nee-meta { margin-top: 4px; font-size: 11.5px; color: var(--tx-3); }
.nee-del { background: none; color: var(--tx-3); font-size: 20px; line-height: 1; padding: 2px 6px; }
.nee-del:hover { color: var(--tx); }
.sect-title { font: 700 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); margin: 4px 0 8px; }


/* ---------------- v49: лента времён ---------------- */
.tlrail { margin-top: 16px; display: flex; flex-direction: column; gap: 0; }
.tler { display: flex; gap: 14px; padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.tlspine { flex: 0 0 42px; display: flex; flex-direction: column; align-items: center; }
.tlnum { font: 900 15px/1 var(--disp); color: var(--violet); letter-spacing: -.02em; padding: 20px 0 8px; }
.tldot { width: 11px; height: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 22%, transparent); flex: 0 0 auto; }
.tlspine::after { content: ''; width: 2px; flex: 1; background: linear-gradient(var(--line-strong), var(--line)); margin-top: 6px; }
.tler:last-child .tlspine::after { background: var(--line); opacity: .4; }
.tlbody { flex: 1; min-width: 0; background: var(--surf); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; margin: 0 0 14px; }
.tlopen .chip.tiny, .tlopen .chip { font-size: 12.5px; }
.ntadv { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ntadv summary { cursor: pointer; font-size: 12.5px; color: var(--tx-3); }
html, body, .sheet, .main, .tlbody, .citas { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0 !important; height: 0 !important; background: transparent; }

/* подпись вкладки чуть плотнее */
.mobiletabs button { line-height: 1.15; }

/* ---------------- v51: лента времён — плавающая «назад» на мобильном ---------------- */
.tl-floatback { display: none; }
@media (max-width: 700px) {
  #view[data-screen="maps"] .tl-floatback {
    display: grid; place-items: center; position: fixed; left: calc(14px); top: calc(14px + var(--sat));
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--void) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--tx); font: 700 20px/1 var(--ui); z-index: 30; cursor: pointer; box-shadow: var(--shadow-sm);
  }
  #view[data-screen="maps"] .tl-floatback:active { transform: scale(.94); }
  /* шапка ленты сдвинута, чтобы круглая «назад» не легла на заголовок */
  #view[data-screen="maps"] .mast { padding-left: 58px; }
  #view[data-screen="maps"] .mast .subline, #view[data-screen="maps"] .mast .masttools { padding-left: 0; }
}

/* ---------------- v54: экран-подсказка «как сохранить» для iOS ---------------- */
.savehint { text-align: center; }
.savehint img { width: 100%; max-width: 520px; border-radius: 18px; box-shadow: var(--shadow); -webkit-touch-callout: default; }