/* «Тетрадь» — обложка в стиле школьной тетради Hatber + интерфейс в духе Apple.
   Обложка: светло-зелёная, эмблема с пером, «ТЕТРАДЬ», поля-наклейки, бейджи.
   Внутри: тёплый лист в клетку 5 мм с красным полем, перелистывание страниц. */

/* Атрибут hidden ДОЛЖЕН прятать. Браузерное правило [hidden]{display:none} слабее любого
   авторского display:flex/grid — из-за этого по коду рассыпаны десятки точечных
   «.что-то[hidden]{display:none}», и стоит забыть один, как на экране остаётся пустая
   плашка (так и случилось с предупреждением о символах). Одно правило закрывает весь класс. */
[hidden] { display: none !important; }

:root {
  /* обложка */
  --cover:      #a9c9a3;
  --cover-2:    #97ba90;
  --cover-3:    #86ac80;
  --cover-ink:  #2c5138;
  --cover-ink-2:#3d6448;
  /* тетрадный лист */
  --paper:  #fbfaf3;
  --paper-2:#f5f3e8;
  --grid:   #cdd9e6;
  --margin: #e0a3a3;
  --ink:    #22315a;
  --muted:  #8a8d80;
  --line:   #e4e0d2;
  --green:  #35774a;
  --green-2:#2c5f3c;
  --cell: 22px;
  --flip: .6s;
  --r: 16px;
  /* ── палитра «Moleskine» для главной (менее зелени, тёплая бумага) ── */
  --nb-green:   #2e6b47;
  --nb-green-2: #234f36;
  --nb-accent:  #8abf77;
  --nb-cover:   #2f5540;
  --nb-cover-2: #24402f;
  --nb-paper:   #f2ecd9;
  --nb-paper-2: #e9e2cc;
  --nb-ink:     #26302a;
  --nb-muted:   #7a8578;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: #23241f; background: #1c2b20; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- сцена перелистывания ---------- */
.book { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh;
  perspective: 2400px; overflow: hidden; }
.page {
  position: absolute; inset: 0; display: none; flex-direction: column;
  transform-origin: left center; backface-visibility: hidden;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.page.active   { display: flex; z-index: 2; transform: rotateY(0); }
.page.incoming { display: flex; z-index: 1; transform: rotateY(0); }
/* will-change только на время переворота — иначе все страницы держались в отдельных GPU-слоях.
   Прежде страница вращалась на -162° и на ~90° резко «пропадала» (backface-visibility) —
   это и было «подмаргивание». Теперь лёгкий поворот + плавное угасание: уходящая страница
   мягко растворяется, открывая уже отрисованную входящую под ней (без пустого кадра). */
.page.turning  { z-index: 3; will-change: transform, opacity;
  transition: transform var(--flip) cubic-bezier(.33,0,.2,1), opacity calc(var(--flip) * .72) ease-out;
  transform: rotateY(-30deg); opacity: 0; box-shadow: 36px 0 56px rgba(0,0,0,.26); }

/* ================= ОБЛОЖКА ================= */
/* justify-content:flex-start + margin:auto на листе — центрирует, когда есть место,
   и позволяет ПРОКРУТКУ, когда лист выше окна (иначе на ПК низ меню обрезался). */
.cover { align-items: center; justify-content: flex-start; padding: 18px 14px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(160deg, var(--cover) 0%, var(--cover-2) 62%, var(--cover-3) 100%); }
.cover__sheet {
  position: relative; width: 100%; max-width: 440px; min-height: min(760px, 94dvh);
  margin: 0 auto; flex-shrink: 0;   /* не сжиматься в высоту — иначе низ меню обрезался без прокрутки */
  padding: 30px 26px 22px; display: flex; flex-direction: column; align-items: center;
  color: var(--cover-ink);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(20,45,28,.35), inset 0 0 0 1px rgba(255,255,255,.25);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%);
}
.cover__grain { position: absolute; inset: 0; pointer-events: none; border-radius: 6px; opacity: .5;
  background-image: radial-gradient(rgba(44,81,56,.10) .6px, transparent .7px);
  background-size: 4px 4px; }

/* эмблема-медальон с пером */
.emblem { position: relative; width: 132px; height: 138px; margin: 6px 0 4px; color: var(--cover-ink); }
.emblem__frame { position: absolute; inset: 0; }
.emblem__frame ellipse { stroke-width: 2; }
.emblem__frame--thin { stroke-width: 1; opacity: .6; }
.emblem__quill { position: absolute; inset: 8px; stroke-width: 2; }
.emblem__laurel { position: absolute; bottom: 16px; width: 26px; height: 44px;
  border: 2px solid var(--cover-ink); border-top: 0; opacity: .55; }
.emblem__laurel--l { left: 22px; border-right: 0; border-bottom-left-radius: 26px; transform: rotate(6deg); }
.emblem__laurel--r { right: 22px; border-left: 0; border-bottom-right-radius: 26px; transform: rotate(-6deg); }

.cover__title { font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: clamp(38px, 12vw, 54px); letter-spacing: .14em; margin: 6px 0 2px;
  text-indent: .14em; color: var(--cover-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.28); }
.cover__subtitle { font-size: 14px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--cover-ink-2); opacity: .85; margin-bottom: 16px; }

.cover__form { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.cover__field { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--cover-ink-2); }
.cover__field span { flex: 0 0 auto; opacity: .8; }
.cover__field i { flex: 1; border-bottom: 1.5px dotted rgba(44,81,56,.5); height: 12px; }

/* меню — сгруппированный список в духе iOS */
.menu { width: 100%; display: flex; flex-direction: column;
  background: rgba(255,255,255,.5); border-radius: var(--r);
  box-shadow: 0 10px 26px rgba(20,45,28,.18), inset 0 0 0 1px rgba(255,255,255,.5);
  overflow: hidden; backdrop-filter: blur(6px); }
.menu__item { display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; background: transparent; border: 0; cursor: pointer; text-align: left;
  color: #24312a; border-top: 1px solid rgba(44,81,56,.10); transition: background .12s; }
.menu__item:first-child { border-top: 0; }
.menu__item:active { background: rgba(44,81,56,.08); }
.menu__ic { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; color: #fff; background: linear-gradient(160deg, var(--green), var(--green-2));
  box-shadow: 0 4px 10px rgba(44,95,60,.35); }
.menu__ic svg { width: 21px; height: 21px; }
.menu__txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.menu__txt b { font-size: 16px; font-weight: 600; }
.menu__txt small { font-size: 12.5px; color: #6f7a6c; }
.menu__go { width: 16px; height: 16px; color: #b7c1b0; stroke-width: 2.4; transform: rotate(180deg); }

/* бейджи-«штампы» снизу обложки */
.cover__badges { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; }
.badge { min-width: 66px; padding: 8px 10px; text-align: center;
  border: 1.5px solid rgba(44,81,56,.5); border-radius: 8px; color: var(--cover-ink);
  display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(255,255,255,.16); }
.badge b { font-size: 20px; font-weight: 700; line-height: 1; }
.badge small { font-size: 10px; letter-spacing: .04em; opacity: .8; }
.badge__cells { width: 22px; height: 22px;
  background-image: linear-gradient(var(--cover-ink) 1px, transparent 1px),
                    linear-gradient(90deg, var(--cover-ink) 1px, transparent 1px);
  background-size: 5px 5px; opacity: .7; }

/* ================= ВНУТРЕННИЕ СТРАНИЦЫ ================= */
/* Тонкая тетрадная клетка как фон — светлая, без жирного поля, чтобы не спорить с UI. */
.paper { background-color: var(--paper); color: var(--ink);
  background-image:
    repeating-linear-gradient(rgba(120,150,185,.09) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(90deg, rgba(120,150,185,.09) 0 1px, transparent 1px var(--cell));
  background-position: 0 0;
}
/* раздел «Инструкции/Помощь» — выраженный тетрадный фон в клетку (как математическая тетрадь) */
#guide.paper {
  background-image:
    repeating-linear-gradient(rgba(74,116,170,.22) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(90deg, rgba(74,116,170,.22) 0 1px, transparent 1px var(--cell));
}
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: linear-gradient(var(--paper) 60%, rgba(251,250,243,.7));
  backdrop-filter: blur(3px); border-bottom: 1px solid rgba(0,0,0,.05); }
.bar h2 { margin: 0 auto 0 4px; font-size: 17px; font-weight: 600; color: #1f3327; }
.bar__mascot { flex: 0 0 auto; height: 46px; width: auto; margin-left: 6px;
  filter: drop-shadow(0 3px 5px rgba(20,52,32,.22)); }
.back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent;
  color: var(--green-2); font-size: 16px; font-weight: 500; cursor: pointer; padding: 4px 4px; }
.back svg { width: 20px; height: 20px; stroke-width: 2.4; }
.sheet { padding: 4px 20px calc(84px + env(safe-area-inset-bottom, 0px)); }

.lbl { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 20px 2px 8px; }

/* кликабельный «?» с подсказкой под каждым пунктом */
.help { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(53,119,74,.14); color: var(--green-2); font-size: 12px; font-weight: 800;
  line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .08s, background .15s; }
.help:active { transform: scale(.88); }
.help.on { background: var(--green); color: #fff; }
.helpbox { font-size: 13px; line-height: 1.55; color: #43493d; margin: 8px 2px 0;
  background: rgba(53,119,74,.08); border: 1px solid rgba(53,119,74,.16); border-radius: 12px; padding: 10px 13px; }
.helpbox b { color: #2f3a2c; }
.helpbox code { background: rgba(53,119,74,.12); color: var(--green-2); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
/* редактор с подложкой-подсветкой: textarea (текст, прозрачный фон) поверх подложки,
   на которой рисуются выделения ровно под буквами. Геометрия ОБОИХ слоёв обязана совпадать. */
.ed { position: relative; }
.ed__hl { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  border: 1px solid transparent; border-radius: 14px; padding: 13px;
  background: rgba(255,255,255,.82); box-shadow: inset 0 1px 2px rgba(0,0,0,.03); }
.ed__hlinner { font-size: 16px; font-family: inherit; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: transparent;
  will-change: transform; }
.ed__hlinner span { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ed textarea { position: relative; z-index: 1; background: transparent; margin: 0; display: block; }

textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px;
  font-size: 16px; font-family: inherit; line-height: 1.4; background: rgba(255,255,255,.82);
  overflow-wrap: break-word; word-break: normal;
  resize: vertical; color: #222; box-shadow: inset 0 1px 2px rgba(0,0,0,.03); }
textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(53,119,74,.14); }

/* строка карточек шрифтов */
.fontrow { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.fontrow::-webkit-scrollbar { height: 0; }
.fontcard { flex: 0 0 auto; scroll-snap-align: start; width: 172px; border: 2px solid transparent;
  border-radius: 14px; background: #fff; padding: 6px; cursor: pointer; transition: border-color .15s, transform .06s;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.fontcard:active { transform: scale(.98); }
.fontcard.active { border-color: var(--green); box-shadow: 0 4px 14px rgba(53,119,74,.28); }
.fontcard img { width: 100%; height: 46px; object-fit: cover; border-radius: 8px; display: block; }
.fontcard span { display: block; font-size: 12px; color: #5b6157; text-align: center; margin-top: 5px; font-weight: 500; }
/* обнаруживаемость горизонтального списка почерков */
.fontrow-wrap { position: relative; }
.fontrow__fade { position: absolute; top: 0; right: 0; bottom: 8px; width: 44px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 72%, #fff 100%);
  transition: opacity .2s ease; }
.fontrow__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 3px 2px 0; }
.fontrow__count { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fontrow__all { border: 1.5px solid var(--line); background: #fff; color: #2f5c3d; font-weight: 700;
  font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.fontrow__all:active { transform: scale(.96); }

/* сегментированный контрол (iOS) */
.seg { display: flex; gap: 3px; background: #e9e7dc; border-radius: 12px; padding: 3px; }
.seg__b { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px 6px;
  font-size: 14px; font-weight: 500; color: #59605a; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, box-shadow .15s; }
.seg__b.active { background: #fff; color: #1f3327; box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; }
.seg__b:disabled { opacity: .4; cursor: default; }

.seg--sub { margin-top: 6px; }
.hint { font-size: 12.5px; color: var(--muted); margin: 8px 2px 0; line-height: 1.5; }
.hint code { background: rgba(53,119,74,.10); color: var(--green-2); border-radius: 5px;
  padding: 1px 5px; font-size: 12px; }

/* профиль / кабинет */
.profile { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 14px 0 6px; }
.profile__ava { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font-size: 34px; font-weight: 700; color: #fff; margin-bottom: 10px;
  background: linear-gradient(160deg, var(--green), var(--green-2)); box-shadow: 0 8px 20px rgba(44,95,60,.34); }
/* аватарка-фото из Telegram: перекрывает градиент, вписана в круг */
.profile__ava.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 8px 20px rgba(44,95,60,.34), inset 0 0 0 2px rgba(255,255,255,.7); }
.profile__name { font-size: 20px; font-weight: 700; color: #21331f; }
.profile__plan { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 16px 0 4px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 6px;
  text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.stat b { display: block; font-size: 24px; font-weight: 800; color: var(--green-2); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }

/* кабинет: история ИИ-запросов */
.ai-hist { margin-top: 18px; }
.ai-hist .stats { grid-template-columns: 1fr 1.5fr; }
.stat--wide b { font-size: 15px; line-height: 1.25; padding: 0 4px; }
.ai-hist__lead { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 8px 2px 8px; }
.ai-hist__lead b { color: #4a5040; }
.ai-hist__list { display: flex; flex-direction: column; gap: 8px; }
.ai-hrow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta dl" "prev dl";
  gap: 2px 10px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 11px; box-shadow: 0 1px 5px rgba(0,0,0,.04); }
.ai-hrow__meta { grid-area: meta; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ai-hrow__meta b { font-size: 13px; color: var(--ink); font-weight: 700; }
.ai-hrow__meta span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-hrow__prev { grid-area: prev; font-size: 11.5px; line-height: 1.4; color: #6a6f60;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ai-hrow__dl { grid-area: dl; margin: 0; padding: 8px 11px; font-size: 12px; white-space: nowrap; align-self: center; }

.mini--soon { position: relative; opacity: .96; }
.mini--soon::after { content: "скоро"; position: absolute; top: 12px; right: 12px; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--green-2);
  background: rgba(53,119,74,.12); border-radius: 6px; padding: 3px 7px; }

/* переключатель разметки (iOS toggle) */
.switch { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.switch__txt { flex: 1; line-height: 1.3; }
.switch__txt b { font-size: 15px; font-weight: 600; }
.switch__txt small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.toggle { flex: 0 0 auto; width: 51px; height: 31px; border-radius: 16px; border: 0; cursor: pointer;
  background: #d3d1c6; position: relative; transition: background .2s; padding: 0; }
.toggle i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.28); transition: transform .2s; }
.toggle.on { background: #34c759; }
.toggle.on i { transform: translateX(20px); }
.toggle.off { opacity: .45; }

/* цвет ручки */
.inks { display: flex; gap: 12px; }
.ink { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  background: var(--c); box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0,0,0,.18); transition: transform .08s; }
.ink:active { transform: scale(.92); }
.ink.active { box-shadow: 0 0 0 2px var(--green), 0 2px 8px rgba(0,0,0,.2); }

/* ползунки (iOS) */
.controls { display: grid; gap: 12px; }
.ctl { display: grid; grid-template-columns: 100px 1fr 48px; align-items: center; gap: 12px; }
.ctl__name { font-size: 13.5px; color: #5b6157; }
.ctl output { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); font-weight: 500; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 5px;
  background: #dcdacd; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px;
  border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.32); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.32); cursor: pointer; }

/* действия */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn { flex: 1 1 130px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; border-radius: 13px; padding: 13px 12px;
  font-size: 15px; font-weight: 600; color: #223; cursor: pointer; font-family: inherit; transition: transform .06s;
  text-align: center; line-height: 1.15; }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn--primary { flex: 1 1 100%; background: linear-gradient(160deg, var(--green), var(--green-2));
  color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(44,95,60,.35); }
.btn--primary svg { fill: #fff; stroke: #fff; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

.preview { margin-top: 16px; min-height: 130px; border: 1px dashed #d5d0bf; border-radius: 14px;
  background: rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 10px; }
.preview img { width: 100%; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
/* Страницы грузятся по одной с сервера (он рисует их по требованию) → у листания есть ожидание.
   Пока страница едет, показываем лист бледным с бегущим блеском — вместо пустого места. */
.preview img.is-loading { opacity: .45; background:
  linear-gradient(100deg, #f4f1e8 30%, #fffdf6 50%, #f4f1e8 70%) var(--paper, #f4f1e8);
  background-size: 220% 100%; animation: pvshine 1.1s linear infinite; min-height: 180px; }
@keyframes pvshine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .preview img.is-loading { animation: none; } }
.preview__hint { color: var(--muted); font-size: 14px; text-align: center; padding: 26px 20px; }
/* предупреждение о символах, которых нет в почерке (эмодзи/иероглифы) */
.tofuhint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0;
  padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35;
  background: #fff5d6; border: 1px solid #e8cf85; color: #6b5412; }
.tofuhint__btn { border: 0; border-radius: 8px; padding: 7px 12px; min-height: 34px;
  background: #6b5412; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.tofu__chars { font-size: 26px; letter-spacing: 4px; text-align: center; margin: 6px 0 14px;
  word-break: break-all; }
.preview__pages { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* состояние превью с эмоцией-скрепкой (пусто / пишу / ошибка) */
.preview__state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 18px; gap: 4px; }
.preview__mascot { width: auto !important; height: 104px; box-shadow: none !important; border-radius: 0 !important;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.2)); }
.preview__state--busy .preview__mascot { animation: writeBob .9s ease-in-out infinite; }
.preview__stitle { font-weight: 700; font-size: 15px; color: var(--nb-ink, #2a3a2c); margin-top: 6px; }
.preview__ssub { font-size: 12.5px; color: var(--muted); max-width: 260px; line-height: 1.35; }
@keyframes writeBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .preview__state--busy .preview__mascot { animation: none; } }

/* галерея почерков */
.gallery { display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 10px; }
.gallery figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); cursor: pointer; transition: transform .06s; }
.gallery figure:active { transform: scale(.99); }
.gallery img { width: 100%; height: 58px; object-fit: cover; border-radius: 8px; display: block; }
.gallery figcaption { font-size: 13.5px; color: #4c5349; margin-top: 8px; font-weight: 500; }
@media (min-width: 620px) { .gallery { grid-template-columns: 1fr 1fr; } }

/* «свой почерк» + «о приложении» */
.soon { text-align: center; padding: 18px 4px; }
.soon__ic { width: 66px; height: 66px; margin: 6px auto 10px; border-radius: 20px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(160deg, var(--green), var(--green-2)); box-shadow: 0 8px 20px rgba(44,95,60,.32); }
.soon__ic svg { width: 34px; height: 34px; }
.soon h3 { color: var(--green-2); margin: 8px 0 6px; font-size: 19px; }
.soon p { color: #4c5349; line-height: 1.5; max-width: 360px; margin: 8px auto; }
.steps { list-style: none; padding: 0; max-width: 360px; margin: 16px auto; text-align: left; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; font-size: 14.5px; color: #3d443a; }
.steps li span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--green), var(--green-2)); color: #fff; font-weight: 700; font-size: 14px; }
.note { font-size: 13px; color: var(--muted); background: rgba(53,119,74,.09);
  border-radius: 10px; padding: 10px 14px; display: inline-block; margin-top: 10px; }
.cards { display: grid; gap: 10px; margin: 16px 0; }
.mini { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.mini b { display: block; font-size: 15px; margin-bottom: 3px; }
.mini span { font-size: 13.5px; color: #5b6157; line-height: 1.4; }
/* «Мои конспекты»: статистика + кликабельные карточки подписки/баланса/инструкции */
.nstats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 6px 0 4px; }
.nstat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 6px; text-align: center; }
.nstat b { display: block; font-size: 24px; font-weight: 800; color: var(--green-2); font-variant-numeric: tabular-nums; }
.nstat span { font-size: 12px; color: var(--muted); }
.mini--act { display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  border: 1px solid var(--line); background: #fff; transition: transform .08s ease, box-shadow .2s ease; }
.mini--act:active { transform: scale(.99); }
.mini--act b { color: var(--ink); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--green-2); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.profile__more { margin-top: 14px; }
.paper p { line-height: 1.55; color: #33382e; }

/* «Свой почерк» — тач-сбор образцов */
@font-face { font-family: "ModelHand"; src: url("/api/model_font.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/Caveat-Regular.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
.cap-intro p { font-size: 14px; line-height: 1.55; color: #3d443a; margin: 4px 2px 10px; }
.cap-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 2px 8px;
  position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, var(--paper) 70%, transparent); padding: 6px 0; }
.cap-pen { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.cap-pen input { width: 120px; }
.cap-pendot { width: 12px; height: 12px; border-radius: 50%; background: #1a285c; display: inline-block; }
.cap-prog { font-size: 13px; color: #4c5349; }
.cap-prog b { color: var(--green-2); font-weight: 800; }
.cap-load { text-align: center; color: var(--muted); padding: 24px; }
.cap-sec { font-weight: 700; color: var(--green-2); margin: 14px 2px 6px; font-size: 13.5px; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cap-cell { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 5px 5px 4px;
  display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.cap-cell.done { border-color: var(--green); box-shadow: 0 2px 9px rgba(53,119,74,.22); }
.cap-cvs { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 8px; touch-action: none; cursor: crosshair;
  background: #fcfdff; }
.cap-lab { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 2px; }
.cap-lab span { font-size: 11px; color: #6a7065; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-redo { flex: 0 0 auto; border: 0; background: rgba(53,119,74,.12); color: var(--green-2); border-radius: 6px;
  font-size: 12px; line-height: 1; padding: 3px 6px; cursor: pointer; }
.cap-redo:active { transform: scale(.9); }

/* мастер разметки (панель над текстом) */
.mtools { display: flex; flex-direction: column; gap: 8px; margin: 2px 2px 9px; }
.mcolors { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.clab { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.macts { display: flex; flex-wrap: wrap; gap: 8px; }
.mtool { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: #fff; border-radius: 11px; padding: 8px 12px; font-size: 13.5px; font-weight: 600;
  color: #2b3327; cursor: pointer; font-family: inherit; box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .06s, box-shadow .15s; }
.mtool:active { transform: scale(.96); }
.mtool.on { background: var(--green); border-color: var(--green); color: #fff; }
.mtool.on u, .mtool.on .mk { color: #fff; }
.mtool u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.mtool u.dbl { text-decoration-style: double; }
.mtool .mk { color: #d9c26a; font-size: 15px; line-height: 1; }
.mtool--clear { color: #a3564f; }
.dot { width: 20px; height: 20px; border-radius: 50%; background: var(--d); display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.14); cursor: pointer; transition: transform .08s, box-shadow .12s; }
.dot:hover { transform: scale(1.15); }
.dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green); transform: scale(1.15); }

/* подпись подраздела (Оформление) + легенда цветов */
.sublbl { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 8px 2px 2px; }
.lg { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--d);
  color: #3a3f33; font-weight: 600; font-size: 12px; margin: 0 1px; }

/* иконка в подписи ползунка */
.ci { width: 15px; height: 15px; vertical-align: -2px; color: var(--green-2); }

/* печатная подсказка */
.hint--print { text-align: center; background: rgba(53,119,74,.07); border-radius: 10px; padding: 8px 10px; margin-top: 12px; }

/* кнопка «Как распечатать в тетради» */
.btn--print { width: 100%; justify-content: center; gap: 8px; margin-top: 10px; font-weight: 650;
  color: #3a3266; border: 1.5px dashed #c3bbe6; background: #f7f5ff; }

/* эмодзи-иконка пункта меню + акцент пункта «Печать» */
.menu__ic--emoji { display: flex; align-items: center; justify-content: center; font-size: 20px; }
.menu__item--print { border-color: #d7cff2; }

/* нарисованный принтер в разделе «Печать в тетради» */
.printer { display: flex; justify-content: center; margin: 6px 0 18px; }
.printer svg { width: 172px; height: auto; filter: drop-shadow(0 8px 16px rgba(74,63,122,.22)); }

/* кнопка «Разметить с помощью ИИ» — под окном ввода. Глубокий галактический перелив
   (те же янтарь→фиолет→синь оттенки, но насыщеннее), рукописный Caveat, скрепка-маскот. */
.btn--ai { position: relative; width: 100%; margin: 12px 0 4px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: center; gap: 11px; border: 0;
  border-radius: 15px; cursor: pointer; overflow: hidden; color: #fff; isolation: isolate;
  background: linear-gradient(115deg, #b8862b 0%, #7d3fb8 34%, #4a2f9e 60%, #2f5bd0 100%);
  background-size: 240% 100%; animation: aiGalaxy 7s ease-in-out infinite;
  box-shadow: 0 10px 24px rgba(74,47,158,.42), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .08s ease; }
/* переливающиеся «звёздные» блики поверх градиента */
.btn--ai::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 70%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,.4) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 33% 60%, rgba(255,255,255,.35) 0 1px, transparent 2px);
  opacity: .0; animation: aiTwinkle 3.6s ease-in-out infinite; }
/* мягкий световой блик, скользящий поперёк кнопки */
.btn--ai::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  z-index: -1; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation: aiSheen 5.5s ease-in-out infinite; }
.btn--ai:active { transform: scale(.99); }
.btn--ai__clip { flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(20,10,50,.4)); }
.btn--ai__t { font-family: "Caveat", "ModelHand", cursive; font-weight: 700;
  font-size: 24px; line-height: 1; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(20,10,50,.45); }
.btn--ai__star { font-size: 1.05em; filter: drop-shadow(0 0 6px rgba(255,225,140,.9)); }
@keyframes aiGalaxy { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes aiTwinkle { 0%,100% { opacity: .15; } 50% { opacity: .8; } }
@keyframes aiSheen { 0% { left: -45%; } 55%,100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .btn--ai, .btn--ai::before, .btn--ai::after { animation: none; }
}
.star { font-size: .92em; }

/* ---- акцент пункта меню «ИИ-генератор» ---- */
.menu__item--ai .menu__ic { background: linear-gradient(135deg, #f6d365 0%, #b98cff 55%, #7c9cff 100%); }
.menu__item--ai .menu__ic svg { fill: none; stroke: #fff; }
.menu__badge { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 9px;
  font-weight: 800; letter-spacing: .06em; color: #fff; background: linear-gradient(135deg, #b98cff, #7c9cff);
  border-radius: 6px; padding: 2px 6px; box-shadow: 0 2px 6px rgba(140,120,220,.4); }

/* ---- страница ИИ-генератора ---- */
/* Порядок блоков: ввод текста ВЫШЕ функций (сначала ввод — потом что с ним делать).
   В режиме «Из фото» ввод (распознанный текст) уезжает ПОД функции: фото → функции → текст. */
#ai .sheet { display: flex; flex-direction: column; }
#aiInput   { order: 4; }
#aiFnsBlock { order: 5; }
#ai .sheet.ai-photo #aiInput { order: 6; }
.ai-step2  { order: 7; }
#aiInput[hidden] { display: none; }
.ai-lead { font-size: 13.5px; line-height: 1.6; color: #43493d; margin: 2px 2px 14px; }
.ai-soon { font-size: 13px; line-height: 1.55; color: #6a4a12; background: #fdf3d8;
  border: 1px solid #f0dca0; border-radius: 12px; padding: 11px 13px; margin: 0 0 14px; }
#aiText { width: 100%; }

.aifns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 6px 0 2px; }
.aifn { display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 11px 12px; transition: border-color .15s, box-shadow .15s, transform .08s; }
.aifn:active { transform: scale(.985); }
.aifn.sel { border-color: #9b7be0; box-shadow: 0 0 0 3px rgba(155,123,224,.18); background: #fbf8ff; }
.aifn:disabled { opacity: .5; cursor: default; }
.aifn__t { font-size: 13.5px; font-weight: 700; color: #29332a; }
.aifn__h { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.aifn--hero { grid-column: 1 / -1;
  background: linear-gradient(135deg, #fbf3df 0%, #f2ebff 60%, #e9f0ff 100%);
  border-color: #d8c8f2; }
.aifn--hero .aifn__t { font-size: 15px; color: #3a2a66; }
.aifn--hero .aifn__h { color: #6b5f86; }
.aifn[hidden] { display: none; }
/* галочка «выбрано» в углу чипа */
.aifn.sel::after { content: "✓"; position: absolute; top: 7px; right: 9px; font-size: 12px;
  font-weight: 800; color: #7b57c9; }
.aifn { position: relative; }
/* анимация нажатия чипа */
@keyframes aifnTap { 0% { transform: scale(1); } 40% { transform: scale(.94); }
  100% { transform: scale(1); } }
.aifn--tap { animation: aifnTap .22s ease; }

/* верхний сегмент режима — крупнее обычного seg */
.aimode { margin: 4px 0 4px; }
.aimode .seg__b { font-size: 12.5px; padding: 10px 4px; font-weight: 600; }
.aimode .seg__b.active { color: #3a2a66; }

/* мелкий сегмент (объём) */
.seg--sm .seg__b { padding: 7px 5px; font-size: 12.5px; }

/* строка выбранных функций (под вводом) */
.ai-picked { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.ai-picked[hidden] { display: none; }
.ai-picked .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  font-weight: 600; color: #3a2a66; background: #f3edff; border: 1px solid #ddd0f4;
  border-radius: 999px; padding: 5px 9px; }
.ai-picked .pill--mk { color: #1f5c3a; background: #e9f8ef; border-color: #c4e6d1; }
.ai-picked .pill b { cursor: pointer; font-weight: 800; opacity: .55; font-size: 13px; }
.ai-picked .pill b:hover { opacity: 1; }
.ai-picked__note { flex-basis: 100%; font-size: 11.5px; line-height: 1.45; color: #a06a2c;
  background: rgba(214,150,60,.1); border-radius: 8px; padding: 6px 9px; margin-top: 2px; }

/* объём результата */
.ai-vol { margin: 12px 0 2px; }
.ai-vol__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ai-vol__row .seg { flex: 1 1 auto; }
.ai-vol__n { min-width: 0; }
.ai-vol__custom { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
/* font-size: 16px обязателен — при меньшем iOS автоматически зумит страницу на фокусе
   (мы больше не блокируем зум через user-scalable=no, см. index.html). */
.ai-vol__custom input { width: 62px; padding: 6px 7px; border: 1.5px solid var(--line);
  border-radius: 8px; background: var(--paper-2); font: inherit; font-size: 16px; text-align: center; }
.ai-vol__est { font-size: 12.5px; color: #4a6a52; font-weight: 600; margin: 8px 2px 0; }
.ai-vol__big { color: #a06a2c; }

/* пометки конфликтов в результате */
.ai-out__note { font-size: 12px; line-height: 1.45; color: #a06a2c;
  background: rgba(214,150,60,.1); border-radius: 8px; padding: 7px 10px; margin: 0 0 8px; }
.ai-out__note[hidden] { display: none; }

.aiparams { margin: 12px 0 2px; }
.aiparam { margin-top: 8px; }
.aiparam[hidden] { display: none; }

.ai-run { margin-top: 16px; }
.ai-run .btn { width: 100%; justify-content: center; }
#aiRun.busy { opacity: .8; }
#aiRun:disabled { opacity: .55; }

.ai-out { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
.ai-out[hidden] { display: none; }
.ai-out__h { font-size: 12px; font-weight: 700; color: #2f3a2c; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ai-out__mascot { height: 40px; width: auto; flex: 0 0 auto; margin: -6px 0;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); animation: floaty 4.4s ease-in-out infinite; }
.ai-out__fn { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
/* мини-эмоция в строке статуса (обработка/готово/ошибка) */
.hint-mascot { height: 30px; width: auto; vertical-align: -9px; margin-right: 6px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.hint-mascot--busy { animation: writeBob .9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hint-mascot--busy, .ai-out__mascot { animation: none; } }
.ai-out__body { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6;
  color: #2a2f26; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px; max-height: 46vh; overflow-y: auto; }
.ai-out .actions { margin-top: 12px; }

/* супер-плитка «Голос → конспект» */
.aifn--super { grid-column: 1 / -1;
  background: linear-gradient(135deg, #ecfbf1 0%, #e6f5ff 60%, #eef0ff 100%);
  border-color: #bfe3cf; }
.aifn--super .aifn__t { color: #1f5c3a; }
.aifn__pro { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 800;
  letter-spacing: .06em; color: #fff; background: linear-gradient(135deg, #2fa16a, #2b8fd0);
  border-radius: 6px; padding: 2px 6px; vertical-align: middle; }

/* шаг 2: ввод */
.ai-step2 { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
.ai-step2[hidden] { display: none; }
.ai-fnhint { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: -2px 2px 10px; }
.ai-example { font-size: 12px; line-height: 1.5; color: #6a6f60; background: var(--paper-2);
  border: 1px dashed var(--line); border-radius: 10px; padding: 8px 11px; margin: 8px 0 0; }
.ai-example b { color: #4a5040; }
.ai-example[hidden] { display: none; }

/* пример результата (раскрывающийся) */
/* наглядный гайд «как это работает» */
.ai-guide { margin: 0 2px 14px; background: var(--paper-2); border: 1.5px solid var(--line);
  border-radius: 14px; overflow: hidden; }
.ai-guide summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #2f5c3d;
  list-style: none; padding: 11px 13px; }
.ai-guide summary::-webkit-details-marker { display: none; }
.ai-guide[open] summary { border-bottom: 1px solid var(--line); }
.ai-guide__body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 9px; }
.ai-guide__steps { display: flex; flex-direction: column; gap: 5px; }
.ai-guide__steps span { font-size: 12.5px; line-height: 1.4; color: #43493d; }
.ai-guide__steps b { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--green-2, #35774a);
  color: #fff; font-size: 11px; }
.ai-guide__grp { font-size: 12.5px; line-height: 1.45; }
.ai-guide__grp b { display: block; color: #2f3a2c; margin-bottom: 1px; }
.ai-guide__grp span { color: var(--muted); }
.ai-guide__tip { font-size: 11.5px; line-height: 1.5; color: #6a6f60; margin: 3px 0 0;
  padding-top: 8px; border-top: 1px dashed var(--line); }
.ai-guide__tip b { color: #4a5040; }
/* короткая шпаргалка (3 строки) */
.ai-guide__line { font-size: 12.5px; line-height: 1.5; color: #43493d; margin: 0; }
.ai-guide__line b { color: #2f3a2c; }

/* способы ввода под окном: фото→текст и диктовка */
.ai-inways { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-inways .btn { flex: 1 1 46%; margin-top: 0; }
/* доступные способы ввода под полем: фото / документ / голос — единый стиль «пунктирной» кнопки */
.ai-inway { justify-content: center; border: 1.5px dashed #c7d6cc; color: #2c5a3e;
  background: #f6faf7; font-weight: 600; font-size: 13.5px; padding: 11px 12px; }
.ai-inway:disabled { opacity: .6; }
.ai-inway.rec { border-color: #d98; color: #a33; background: #fdf3f0; animation: micPulse 1s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,60,50,.28); } 50% { box-shadow: 0 0 0 5px rgba(200,60,50,0); } }
@media (prefers-reduced-motion: reduce) { .ai-inway.rec { animation: none; } }
#aiMic { border-color: #cdbcf0; color: #4a2f8c; background: #faf7ff; }
#aiAudioInBtn { border-color: #cdbcf0; color: #4a2f8c; background: #faf7ff; }
#aiPhoto { border-color: #bfe0d0; color: #1f6a45; background: #f4fbf7; }
#aiDocBtn { border-color: #c9d3ea; color: #2f4a86; background: #f5f7fd; }
.ai-inways__note { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 8px 2px 0; }

/* бейдж остатка бесплатных листов (§9) */
.freebar { text-align: center; font-size: 12.5px; font-weight: 600; border-radius: 10px;
  padding: 7px 10px; margin-top: 12px; color: #35594a; background: rgba(53,119,74,.09); }
.freebar[hidden] { display: none; }
.freebar--ok { color: #1f6a45; background: rgba(47,161,106,.12); }
.freebar--low { color: #a06a2c; background: rgba(214,150,60,.13); }
.freebar--out { color: #a33; background: rgba(200,60,60,.11); }
.btn--ai__star { font-size: .95em; }

/* «Термины» ⊂ «Умная разметка»: пояснение на чипе */
.aifn__note { display: inline-block; align-self: flex-start; margin-top: 4px; font-size: 10px;
  font-weight: 700; color: #4a2f8c; background: #f0e9fd; border: 1px solid #ddd0f5;
  border-radius: 999px; padding: 1px 7px; }
.aifn--folded { opacity: .82; }

/* анимация «въезда» новой пилюли при замене конфликтующего чипа */
@keyframes pillIn { from { transform: translateX(-8px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-picked .pill--in { animation: pillIn .18s ease; }

.ai-sample { margin-top: 14px; }
.ai-sample[hidden] { display: none; }
.ai-sample summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #2f5c3d;
  list-style: none; padding: 8px 0; }
.ai-sample summary::-webkit-details-marker { display: none; }
.ai-sample__body { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.55;
  color: #3a4034; background: #f3f8f0; border: 1px solid #dce8d6; border-radius: 12px;
  padding: 11px 13px; margin-top: 6px; }

/* голосовой ввод */
.ai-voice__methods { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ai-voice__methods .btn { justify-content: center; margin-top: 0; }
.ai-voice__methods #aiViaBot { grid-column: 1 / -1; }
.ai-voice__file { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#aiRec.rec { background: linear-gradient(160deg, #d64545, #b02f2f); color: #fff; }
.ai-formats { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 10px 2px 0; }
.ai-formats b { color: #4a5040; }
#aiVoiceText { width: 100%; margin-top: 10px; }
.ai-lock { font-size: 13px; line-height: 1.55; color: #6a4a12; background: #fdf3d8;
  border: 1px solid #f0dca0; border-radius: 12px; padding: 11px 13px; }

/* знаки отличия и прогресс звания в профиле */
.badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.badges[hidden] { display: none; }
.badge-role, .badge-lvl { display: inline-flex; align-items: center; font-size: 12.5px;
  font-weight: 700; border-radius: 999px; padding: 5px 12px; }
.badge-role { color: #6a4a12; background: linear-gradient(135deg, #ffe9a8, #ffd066);
  box-shadow: 0 2px 8px rgba(220,170,60,.35); }
.badge-role[hidden] { display: none; }
.badge-lvl { color: #2f5c3d; background: #e7f2e2; border: 1px solid #cfe4c6; }
.levelbar { margin: 14px 2px 4px; }
.levelbar[hidden] { display: none; }
.levelbar__track { height: 9px; border-radius: 999px; background: var(--paper-2);
  border: 1px solid var(--line); overflow: hidden; }
.levelbar__fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7bc48f, var(--green)); transition: width .5s ease; }
.levelbar__cap { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 6px; }

/* модал ИИ-форматирования */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20,30,22,.5); backdrop-filter: blur(3px); }
.modal__card { position: relative; z-index: 1; width: 100%; max-width: 400px; max-height: 88vh; overflow-y: auto;
  background: var(--paper); border-radius: 20px; padding: 22px 20px 18px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.4); animation: pop .22s ease; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal__close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.06); color: #4c5349; font-size: 15px; cursor: pointer; }
.modal__ic { width: 60px; height: 60px; margin: 4px auto 8px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, #f6d365, #b98cff); box-shadow: 0 8px 20px rgba(140,120,220,.35); }
.modal__ic svg { width: 32px; height: 32px; fill: none; stroke: #3a2a6a; }
.modal__card h3 { margin: 6px 0 8px; color: #2b2350; font-size: 20px; }
.modal__lead { color: #43493d; line-height: 1.5; font-size: 14.5px; margin: 0 0 14px; }
.modal__prompt { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.modal__prompt-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.modal__prompt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.modal__prompt li { font-size: 14px; color: #3d443a; line-height: 1.4; }
.modal .u { text-decoration: underline; text-underline-offset: 3px; }
.modal .u.dbl { text-decoration-style: double; }
.modal__cta { width: 100%; margin-top: 16px; }

/* доступность: без 3D-переворота */
@media (prefers-reduced-motion: reduce) {
  .page.turning { transition: opacity .2s; transform: rotateY(0); opacity: 0; box-shadow: none; }
}

/* ===== кнопка «во весь экран» у поля текста ===== */
.expand { margin-left: auto; border: 1px solid var(--line); background: #fff; color: var(--green-2);
  border-radius: 9px; font: 600 12px/1 inherit; padding: 6px 9px; cursor: pointer; letter-spacing: .01em;
  text-transform: none; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.expand:active { transform: scale(.96); }
/* «Во весь экран» — отдельной строкой на всю ширину под окном ввода (скрин #2) */
.expand--full { margin: 8px 0 2px; width: 100%; display: flex; align-items: center;
  justify-content: center; gap: 6px; padding: 11px 12px; font-size: 13.5px; }
/* второстепенная кнопка (напр. запасная ссылка-скачивание шаблона) */
.btn--ghost { background: #fff; color: var(--green-2); border: 1px dashed var(--line); }
/* блок «Подгонка текста» на фото-тетради (Фаза E) */
.photofit { margin: 6px 0 2px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(255,255,255,.55); }
.photofit__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.photofit .controls { margin-top: 6px; }

/* ===== полноэкранный редактор текста + разметка ===== */
.editfull { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top,0px) + 8px) 12px calc(env(safe-area-inset-bottom,0px) + 10px); }
.editfull[hidden] { display: none; }
.editfull__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 10px; }
.editfull__ttl { font-weight: 800; color: var(--ink); font-size: 16px; }
.editfull__done { flex: 0 0 auto; min-width: 120px; }
.editfull__slot { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* внутри полноэкранного слота поле текста растягивается на всю доступную высоту */
.editfull__slot .mtools { flex: 0 0 auto; }
.editfull__slot .ed { flex: 1 1 auto; display: flex; min-height: 0; }
.editfull__slot .ed textarea { flex: 1; height: 100%; min-height: 0; resize: none; font-size: 17px; }
.editfull__slot .ed__hlinner { font-size: 17px; }

/* ===== полноэкранное окно сбора почерка (по пунктам) ===== */
.capmodal { position: fixed; inset: 0; z-index: 62; background: var(--paper); display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top,0px) + 8px) 14px calc(env(safe-area-inset-bottom,0px) + 12px); }
.capmodal[hidden] { display: none; }
.capmodal__head { display: flex; align-items: center; gap: 12px; }
.capmodal__x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.06);
  color: #4c5349; font-size: 16px; cursor: pointer; }
.capmodal__progwrap { flex: 1; display: flex; align-items: center; gap: 10px; }
.capbar { flex: 1; height: 8px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.capbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--green-2));
  border-radius: 6px; transition: width .25s ease; }
.capmodal__cnt { font-size: 13px; color: #4c5349; white-space: nowrap; }
.capmodal__cnt b { color: var(--green-2); font-weight: 800; }
.capmodal__title { text-align: center; margin: 12px 0 2px; font-size: 26px; color: var(--ink); }
.capmodal__sec { display: block; font-size: 12.5px; font-weight: 700; color: var(--green-2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.capmodal__hint { text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 2px 6px 8px; }
.capmodal__stage { flex: 1; display: grid; place-items: center; min-height: 0; }
#capBig { width: min(86vw, 62vh, 470px); aspect-ratio: 1 / 1; background: #fcfdff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.08); touch-action: none; cursor: crosshair; }
.capmodal__pen { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12.5px;
  color: var(--muted); margin: 8px 0 4px; }
.capmodal__pen input { width: 150px; }
.capmodal__acts { display: flex; gap: 9px; margin-top: 4px; }
.capmodal__tip { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 6px 0; line-height: 1.45; }

/* обзорная сетка: ячейка кликабельна (открывает большое окно), «галка» на заполненных */
.cap-cell { position: relative; cursor: pointer; }
.cap-cvs { pointer-events: none; }   /* рисуем в большом окне; клик по ячейке открывает его */
.cap-cell.done::after { content: "✓"; position: absolute; top: 5px; right: 6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(53,119,74,.4); }

/* тост-уведомление */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom,0px) + 22px); transform: translateX(-50%);
  z-index: 90; background: rgba(26,40,60,.95); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px;
  font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: 88vw; text-align: center; }
.toast[hidden] { display: none; }
.toast--err { background: rgba(150,45,45,.96); }

/* ===== приветственная бегущая строка «от руки» на обложке ===== */
.penline { width: 100%; max-width: 320px; height: 34px; margin: 2px 0 14px; display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
/* Обложка ВСЕГДА пишет модельным (демо) почерком «ModelHand», а НЕ личным «MyHand»
   пользователя: иначе на телефоне, где собран свой почерк, приветственная строка писалась
   его почерком (на ПК-тесте без своего шрифта был ModelHand — «правильный» вид). */
#penTxt { font-family: "ModelHand", cursive; font-size: 22px; color: var(--cover-ink);
  white-space: nowrap; letter-spacing: .01em; }
.penCaret { display: inline-block; width: 2px; height: 24px; margin-left: 1px; background: var(--cover-ink-2);
  border-radius: 2px; animation: penblink 1s steps(1) infinite; }
@keyframes penblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .penCaret { animation: none; } }

/* ===== уместные появления (stagger) ===== */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cover.active .menu__item { animation: riseIn .5s both; }
.cover.active .menu__item:nth-child(1) { animation-delay: .05s; }
.cover.active .menu__item:nth-child(2) { animation-delay: .12s; }
.cover.active .menu__item:nth-child(3) { animation-delay: .19s; }
.cover.active .menu__item:nth-child(4) { animation-delay: .26s; }
.cover.active .menu__item:nth-child(5) { animation-delay: .33s; }
.cover.active .menu__item:nth-child(6) { animation-delay: .40s; }
.cover.active .badge { animation: riseIn .5s both .45s; }
.paper.active .sheet > * { animation: riseIn .32s both; }
@media (prefers-reduced-motion: reduce) {
  .cover.active .menu__item, .cover.active .badge, .paper.active .sheet > * { animation: none; }
}

/* ===== «Мой почерк»: собранные шрифты сверху ===== */
.myfonts__row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.myfont { flex: 0 0 auto; width: 168px; background: #fff; border: 2px solid var(--green); border-radius: 14px;
  padding: 7px; box-shadow: 0 3px 12px rgba(53,119,74,.2); }
.myfont img { width: 100%; height: 44px; object-fit: cover; border-radius: 8px; display: block; background: #fcfdff; }
.myfont__row2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; }
.myfont__row2 b { font-size: 12.5px; color: #3d443a; }
.myfont__use { border: 0; background: linear-gradient(160deg, var(--green), var(--green-2)); color: #fff;
  border-radius: 8px; font: 600 12px/1 inherit; padding: 7px 10px; cursor: pointer; }
.myfont__use:active { transform: scale(.95); }
.cap-free { font-size: 13px; color: #3d5a43; background: rgba(53,119,74,.09);
  border: 1px solid rgba(53,119,74,.16); border-radius: 10px; padding: 8px 11px; margin: 8px 2px 2px; }

/* ===== «Свой почерк»: виды (наборы → способ → классика|шаблон) ===== */
.capview[hidden] { display: none; }
.capback { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent;
  cursor: pointer; font: 600 14px/1 inherit; color: var(--green-2); padding: 4px 2px; margin: 0 0 6px -2px; }
.capback svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.capback:active { transform: scale(.96); }
.capset-title { margin: 2px 2px 2px; font-size: 20px; color: var(--nb-green);
  font-family: "Caveat", "ModelHand", cursive; font-weight: 700; }
.capset-lead { font-size: 13px; line-height: 1.5; color: #4a5147; margin: 2px 2px 12px; }
/* карточки наборов символов */
.capsets { display: grid; gap: 11px; margin: 8px 0 4px; }
.capset { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 12px 13px; font-family: inherit;
  box-shadow: 0 2px 10px rgba(30,50,34,.07); transition: transform .08s ease, border-color .15s; }
.capset:active { transform: scale(.99); }
.capset__ic { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(160deg, #eef6ea, #e2eedb); }
.capset__ic img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(20,52,32,.2)); }
.capset__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.capset__txt b { font-size: 16px; color: #21331f; }
.capset__txt small { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.capset__prog { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  font-weight: 600; }
.capset__prog.full { color: var(--green-2); }
.capset__go { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(46,107,71,.1); }
.capset__go svg { width: 13px; height: 13px; stroke: var(--green-2); fill: none; stroke-width: 2.4; transform: rotate(180deg); }
/* выбор способа заполнения */
.capmethods { display: grid; gap: 12px; margin: 4px 0; }
.capmethod { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 14px 14px; font-family: inherit;
  box-shadow: 0 3px 12px rgba(30,50,34,.08); transition: transform .08s ease, border-color .15s; }
.capmethod:active { transform: scale(.99); }
.capmethod:hover { border-color: rgba(53,119,74,.45); }
.capmethod__ic { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(160deg, #eef6ea, #dfeed7); }
.capmethod__ic img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(20,52,32,.22)); }
.capmethod__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.capmethod__txt b { font-size: 16px; color: #21331f; display: flex; align-items: center; gap: 7px; }
.capmethod__txt small { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }

/* ===== разделы-тизеры «Свой почерк» ===== */
.capsecs { display: grid; gap: 12px; margin-top: 6px; }
.capsec { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.capsec.done { border-color: rgba(53,119,74,.5); }
.capsec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.capsec__head b { font-size: 15px; color: #21331f; }
.capsec__prog { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.capsec__prog.full { color: var(--green-2); font-weight: 700; }
.capsec__samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 11px; }
.capsec__cv { width: 100%; aspect-ratio: 1 / 1; background: #fcfdff; border: 1px solid var(--line);
  border-radius: 10px; display: block; }
.capsec__fill { width: 100%; }

/* сетка всех букв раздела — тап по любой → правка (Фаза C) */
.capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 7px; margin-bottom: 11px; }
.captile { position: relative; padding: 0; background: #fcfdff; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  overflow: hidden; -webkit-tap-highlight-color: transparent; transition: border-color .15s, transform .1s; }
.captile:active { transform: scale(.94); }
.captile__cv { width: 100%; aspect-ratio: 1 / 1; display: block; }
.captile__lb { font-size: 11px; color: var(--muted); line-height: 1; padding: 1px 0 3px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.captile.filled { border-color: rgba(53,119,74,.6); background: #f2faf3; }
.captile.filled::after { content: "✓"; position: absolute; top: 2px; right: 3px; font-size: 11px;
  font-weight: 800; color: var(--green-2); }
.cap-sample__lbl { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.cap-sample__txt { font-family: MyHand, "ModelHand", cursive; font-size: 26px; line-height: 1.5;
  color: #1a285c; word-break: break-word; }

/* смешивание почерков (Фаза D) */
.blend { margin: 6px 0 2px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; overflow: hidden; }
.blend__sum { cursor: pointer; padding: 11px 13px; font-size: 14px; font-weight: 700;
  color: #21331f; list-style: none; -webkit-tap-highlight-color: transparent; }
.blend__sum::-webkit-details-marker { display: none; }
.blend__cnt { color: var(--green-2); font-weight: 800; margin-left: 4px; }
.blend__lead { font-size: 12.5px; color: var(--muted); padding: 0 13px 8px; margin: 0; }
.blend__row { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 13px 12px; }
.blendchip { border: 1.5px solid var(--line); background: #fcfdff; color: #3d443a;
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: all .12s; }
.blendchip:active { transform: scale(.94); }
.blendchip.active { border-color: var(--green-2); background: #eaf7ec; color: var(--green-2); font-weight: 700; }
.blendchip.disabled { opacity: .38; text-decoration: line-through; }

/* Фаза E: сбор почерка по фото шаблона (бета) */
.photofont { margin: 8px 0 14px; border: 1px dashed var(--green); border-radius: 14px;
  background: #f7fcf8; overflow: hidden; }
.photofont__sum { cursor: pointer; padding: 12px 14px; font-size: 14.5px; font-weight: 700;
  color: #21331f; list-style: none; -webkit-tap-highlight-color: transparent; }
.photofont__sum::-webkit-details-marker { display: none; }
.photofont__lead { font-size: 12.5px; color: #4c5349; padding: 0 14px 8px; margin: 0; }
.photofont .actions { padding: 0 14px 6px; }
.photofont .hint { padding: 0 14px; }
.beta { display: inline-block; font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, var(--green), var(--green-2)); border-radius: 999px;
  padding: 1px 7px; vertical-align: middle; margin-left: 4px; letter-spacing: .3px; }

/* ===== оборотка тетради: алфавит ===== */
/* оборотка вписана в бумажную зону тетради (как главная): без «плавающей панели»,
   слева отступ под спираль, снизу — под нижнюю навигацию. */
.backcover .cover__sheet { justify-content: flex-start; align-items: stretch;
  max-width: none; width: 100%; min-height: 0; margin: 0; border-radius: 0;
  background: none; box-shadow: none;
  padding: 46px 30px calc(96px + env(safe-area-inset-bottom, 0px)) 54px; }
.backcover .cover__grain { display: none; }
.backcover__back { position: absolute; top: 16px; left: 54px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 10px;
  border-radius: 999px; color: var(--cover-ink); font-weight: 600;
  background: rgba(255,255,255,.62); box-shadow: 0 2px 7px rgba(44,81,56,.2),
  inset 0 0 0 1px rgba(255,255,255,.6); }
.backcover__back svg { width: 19px; height: 19px; stroke: var(--cover-ink); fill: none; }
.backcover__back:active { transform: scale(.97); }
.backcover__ttl { font-family: Georgia, "Times New Roman", serif; font-size: 22px; letter-spacing: .04em;
  color: var(--cover-ink); text-align: center; margin: 26px 0 14px; opacity: .9; }
.alphabet { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 4px;
  padding: 16px 12px; background: rgba(255,255,255,.34); border: 1px solid rgba(44,81,56,.28);
  border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.ab { font-family: "MyHand", "ModelHand", cursive; font-size: clamp(20px, 6vw, 26px); text-align: center;
  color: var(--cover-ink); line-height: 1.15; animation: riseIn .4s both; }
.backcover.active .ab { animation: penIn .5s both; }
@keyframes penIn { from { opacity: 0; transform: translateY(4px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .backcover.active .ab { animation: none; } }
.backcover__meta { width: 100%; display: flex; align-items: center; gap: 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(44,81,56,.35); }
.backcover__mascot { flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(44,81,56,.28)); }
.backcover__pub { flex: 1 1 auto; font-size: 11.5px; line-height: 1.5; color: var(--cover-ink-2); }
.backcover__pub b { font-size: 15px; color: var(--cover-ink); font-family: "Caveat", "ModelHand", cursive; letter-spacing: .3px; }
.backcover__pub span { color: var(--cover-ink-2); }
/* список возможностей — как аннотация на обороте книги */
.backcover__feats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.backcover__feats li { font-size: 12px; line-height: 1.35; color: var(--cover-ink); }
/* плашка бесплатного/рефералки */
.backcover__gift { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding: 9px 12px;
  border-radius: 10px; background: rgba(255,255,255,.4); border: 1px solid rgba(44,81,56,.24);
  font-size: 11.5px; color: var(--cover-ink-2); }
.backcover__gift b { color: var(--cover-ink); }
/* футер: поддержка + штрих-код */
.backcover__foot { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(44,81,56,.35); }
.backcover__support { font-size: 11px; line-height: 1.6; color: var(--cover-ink-2); }
.backcover__support b { color: var(--cover-ink); }
.backcover__barcode { flex: 0 0 auto; width: 116px; height: 44px;
  background: repeating-linear-gradient(90deg, var(--cover-ink) 0 1px, transparent 1px 2px,
    var(--cover-ink) 2px 4px, transparent 4px 7px, var(--cover-ink) 7px 8px, transparent 8px 11px);
  opacity: .72; border-radius: 2px; }
.backcover__about { font-size: 12.5px; line-height: 1.5; color: var(--cover-ink-2); text-align: center;
  margin: 14px 4px 0; opacity: .92; }

/* ===== листалка предпросмотра ===== */
.pager { display: flex; align-items: center; gap: 10px; margin: 18px 2px 0; flex-wrap: wrap; }
.pager[hidden] { display: none; }
.pager__b { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  color: var(--green-2); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.pager__b:active { transform: scale(.94); }
.pager__b:disabled { opacity: .4; cursor: default; }
.pager__lbl { font-size: 13px; color: #4c5349; font-variant-numeric: tabular-nums; }
.pager__lbl b { color: var(--green-2); font-weight: 800; }
.pager__zoom { font-size: 12px; color: var(--muted); margin-left: auto; }
.preview img { cursor: zoom-in; }

/* ===== лайтбокс (зум предпросмотра) ===== */
.lightbox { position: fixed; inset: 0; z-index: 80; background: #0f150f; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top,0px) + 6px) 8px calc(env(safe-area-inset-bottom,0px) + 8px); }
.lightbox[hidden] { display: none; }
.lightbox__bar { display: flex; align-items: center; gap: 10px; color: #eaf1ea; padding: 4px 4px 8px; flex-wrap: wrap; }
.lightbox__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14);
  color: #fff; font-size: 16px; cursor: pointer; }
.lightbox__nav, .lightbox__zoom { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lightbox__zoom { margin-left: auto; }
.lightbox__b { min-width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 8px; }
.lightbox__b:active { transform: scale(.94); }
.lightbox__b:disabled { opacity: .35; cursor: default; }
.lightbox__lbl b { color: #fff; }
.lightbox__stage { flex: 1; overflow: hidden; position: relative; touch-action: none; min-height: 0; }
/* max-width:none — картинка раскладывается в НАТУРАЛЬНУЮ величину (1240px), а вписывается
   через transform: scale(fit·zoom) в JS. Иначе растр кладётся в размер контейнера и зум мылит.
   position:absolute + origin 0 0 — лист прижат к верх-лево сцены, а центрирование целиком
   считает JS (translate). Без этого CSS-центрирование переполняющего листа в Telegram WebView
   уводит его вниз-вправо за экран при 100%. */
.lightbox__stage img { position: absolute; top: 0; left: 0; max-width: none; max-height: none;
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; cursor: grab; }
.lightbox__stage img.grabbing { cursor: grabbing; }
.lightbox__tip { text-align: center; color: rgba(234,241,234,.7); font-size: 11.5px; margin: 6px 6px 0; }

/* эмодзи-иконка в модале лимита */
.modal__ic--emoji { font-size: 30px; }

/* ===== раздел «Инструкции» (гайд по функционалу со скриншотами) ===== */
.guide { display: grid; gap: 16px; }
.guide__lead { font-size: 14.5px; line-height: 1.5; color: #3d443a; background: rgba(53,119,74,.08);
  border: 1px solid rgba(53,119,74,.16); border-radius: 14px; padding: 12px 14px; margin: 0; }
.guide__lead b { color: #21331f; }
.guide__step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.guide__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.guide__num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 15px/1 inherit; color: #fff; background: linear-gradient(160deg, var(--green), var(--green-2));
  box-shadow: 0 3px 8px rgba(53,119,74,.28); }
.guide__head h3 { margin: 0; font-size: 16px; color: #21331f; }
.guide__mascot { flex: 0 0 auto; height: 56px; width: auto; margin-left: auto; align-self: center;
  filter: drop-shadow(0 3px 5px rgba(20,52,32,.18)); }
.guide__step p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #4a5147; }
.guide__step p:last-of-type { margin-bottom: 0; }
.guide__step ul { margin: 0 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.55; color: #4a5147; }
.guide__step li { margin: 2px 0; }
.guide__step b { color: #2b3327; }
.guide__shot { width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 14px;
  display: block; background: #fcfdff; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.guide__tip { font-size: 13px; line-height: 1.5; color: #3d5a43; background: rgba(53,119,74,.09);
  border: 1px solid rgba(53,119,74,.16); border-radius: 12px; padding: 10px 12px; margin: 2px 0 0; }
.guide__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.guide__table th, .guide__table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.45; }
.guide__table th { color: var(--muted); font-weight: 600; }
.guide__table td:first-child { color: #21331f; font-weight: 600; white-space: nowrap; }
.guide__table tr:last-child td { border-bottom: 0; }

/* ===== Герой «Скрепка»: переиспользуемая подсказка (скрепка + пузырь) ===== */
.tipster { display: flex; gap: 11px; align-items: flex-start; margin: 12px 0;
  background: #f4fbf7; border: 1px solid #cfe6d5; border-radius: 15px; padding: 12px 13px; }
.tipster__clip { flex: 0 0 auto; width: 60px; align-self: center; color: var(--cover-ink);
  display: flex; align-items: center; justify-content: center; }
.tipster__clip svg { width: 38px; height: 46px; transform: rotate(-8deg); }
.tipster__clip img { width: 60px; height: auto; object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(20,52,32,.2)); }
.tipster__bubble { flex: 1; font-size: 13.5px; line-height: 1.5; color: #2c4636; }
.tipster__bubble > b { color: var(--cover-ink); }
.tipster__bubble p { margin: 0 0 6px; }
.tipster__bubble p:last-child { margin-bottom: 0; }
.tipster__bubble ul { margin: 6px 0 0; padding-left: 18px; }
.tipster__bubble li { margin: 3px 0; }
.tipster__sign { display: block; margin-top: 8px; font-weight: 700; color: var(--cover-ink); font-size: 12.5px; }
/* фиолетовый вариант для ИИ-раздела */
.tipster--ai { background: #faf7ff; border-color: #e2d6f8; }
.tipster--ai .tipster__clip { color: #6b4fae; }
.tipster--ai .tipster__bubble { color: #3a2f52; }
.tipster--ai .tipster__bubble > b, .tipster--ai .tipster__sign { color: #6b4fae; }

/* ===== раздел «Фото-конспект»: слоган + крупная зона загрузки ===== */
.ai-slogan { margin: 4px 0 12px; font-size: 16px; line-height: 1.4; font-weight: 700;
  color: #4a3a7a; text-align: center; }
.ai-slogan span { display: block; font-size: 12.5px; font-weight: 500; color: #7a6aa8; margin-top: 3px; }
.ai-photozone { display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 20px 14px; border: 2px dashed #c9b9ee; border-radius: 16px;
  background: #faf7ff; color: #5a4a8c; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: border-color .15s, background .15s; }
.ai-photozone:active { background: #f3ecff; border-color: #b39ce6; }
.ai-photozone__ic { font-size: 30px; line-height: 1; }
.ai-photozone__sub { font-size: 12px; font-weight: 500; color: #8a7ab8; text-align: center; }
.ai-photozone.busy { opacity: .7; pointer-events: none; }

.ai-photonote { width: 100%; margin-top: 4px; }

/* три режима ИИ в одном сегменте — чуть теснее, чтобы влезли подписи */
.aimode--3 .seg__b { padding-left: 4px; padding-right: 4px; font-size: 12.5px; }

/* глоссарий настроек (в разделе печати): компактный список «значок — что делает» */
.glossary { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.glossary li { font-size: 13.5px; line-height: 1.45; color: #4a5147; }
.glossary b { color: #2b3327; }

/* ===== выбор фона листа: горизонтальная лента свотчей (Фаза B) ===== */
.bgrow-wrap { position: relative; margin: 2px 0 4px; }
/* «Без фона» вынесен отдельной строкой над лентой фонов (печать на своей разлиновке) */
.bgnone-row { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; }
.bgnone-row__hint { font-size: 12px; line-height: 1.35; color: var(--muted); }
.bg-sub { margin: 6px 2px 2px; }
.bgrow { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; }
.bgrow::-webkit-scrollbar { height: 0; }
.bgtile { flex: 0 0 auto; width: 62px; border: 0; background: transparent; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bgtile img { width: 62px; height: 80px; object-fit: cover; border-radius: 9px; border: 2px solid var(--line); background: #fff; }
.bgtile__l { font-size: 10px; color: var(--muted); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgtile.active img { border-color: #9b7be0; box-shadow: 0 0 0 3px rgba(155,123,224,.18); }
.bgtile.active .bgtile__l { color: #6b4fae; font-weight: 600; }
.bgtile__none, .bgtile__plus { width: 62px; height: 80px; border-radius: 9px; border: 2px dashed #c9d0dd;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: #9aa2b0; background: #f7f8fb; }
.bgtile--none.active .bgtile__none { border-color: #9b7be0; color: #6b4fae; background: #faf7ff; }

/* ================== ТУР «СКРЕПКА» — проводник по интерфейсу ================== */
/* Кнопка «Как приступить?» в шапке раздела */
/* как «скрепка»-кнопка с обложки: живой маскот-скрепка + мягкая зелёная пилюля (clipcard__btn) */
.howto { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 0;
  padding: 4px 13px 4px 7px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700;
  color: #fff; background: linear-gradient(158deg, #3c8358, var(--green-2));
  box-shadow: 0 5px 12px rgba(20,52,32,.26), inset 0 1px 0 rgba(255,255,255,.18);
  cursor: pointer; white-space: nowrap; }
.howto__clip { height: 32px; width: auto; flex: 0 0 auto; margin: -8px -2px -8px 0; display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.32)); }
.howto svg { width: 17px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transform: rotate(-8deg); }
.howto:active { transform: scale(.94); }
/* Крупный запуск на обложке / странице «Инструкции» */
.howto--cover { display: flex; width: 100%; justify-content: center; margin: 14px 0 4px;
  padding: 12px 16px; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%);
  box-shadow: 0 6px 18px rgba(44,95,60,.28); }
.howto--cover svg { width: 20px; height: 24px; }

/* Оверлей: 4 тёмные панели вокруг «дырки» — цель остаётся яркой без z-index-фокусов */
/* veil ловит все клики (это проводник, а не «сделай сам») — навигация только кнопками пузыря */
.tour-veil { position: fixed; inset: 0; z-index: 1000; pointer-events: auto; }
/* без backdrop-filter: 4 полноэкранные панели с blur/saturate давали заметный джанк на слабых
   телефонах; чуть более плотная заливка сохраняет тот же эффект «затемнения» без композитинга */
.tour-mask { position: absolute; background: rgba(18,26,20,.7); pointer-events: auto; }
.tour-ring { position: absolute; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(169,201,163,.95), 0 0 0 6px rgba(53,119,74,.45);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
  animation: tourPulse 2s ease-in-out infinite; }
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(169,201,163,.95), 0 0 0 6px rgba(53,119,74,.35), 0 0 20px 3px rgba(53,119,74,.20); }
  50%      { box-shadow: 0 0 0 3px rgba(180,214,175,1),  0 0 0 7px rgba(53,119,74,.5),  0 0 30px 8px rgba(53,119,74,.40); }
}

/* Пузырь Скрепки */
.tour-pop { position: fixed; z-index: 1001; width: min(340px, calc(100vw - 24px));
  display: flex; gap: 10px; align-items: flex-start; pointer-events: auto;
  background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px 15px;
  box-shadow: 0 14px 40px rgba(0,0,0,.4); border: 1.5px solid var(--line);
  transition: left .18s ease, top .18s ease; }
.tour-pop__clip { flex: 0 0 auto; width: 34px; height: 42px; color: var(--cover-ink); }
.tour-pop__clip svg { width: 34px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transform: rotate(-8deg); }
/* эмоция-скрепка в пузыре подсказки (вместо линейного значка) */
.tour-pop__clip--mascot { width: 70px; height: auto; align-self: center; margin: -2px 2px -2px -4px; }
.tour-pop__clip--mascot img { width: 72px; height: auto; display: block;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.28)); animation: floaty 4s ease-in-out infinite; }
.tour-pop__body { flex: 1; min-width: 0; }
.tour-pop__title { margin: 1px 0 4px; font-size: 15px; font-weight: 700; color: var(--cover-ink); }
.tour-pop__text { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; color: #33463a; }
.tour-pop__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-pop__skip { border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: 12.5px; padding: 4px 2px; cursor: pointer; }
.tour-pop__skip:active { color: var(--ink); }
.tour-pop__nav { display: flex; align-items: center; gap: 8px; }
/* прогресс точками: отдельная строка над кнопками (не переполняет подвал при 10+ шагах),
   активная — вытянутая «таблетка»; flex-wrap страхует любое число шагов */
.tour-pop__dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 5px; margin: 0 0 12px; }
.tour-pop__dots:empty { display: none; }
.tour-pop__dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(53,119,74,.28);
  transition: width .2s ease, background .2s ease; }
.tour-pop__dots i.on { width: 17px; background: var(--green); }
/* хвостик-указатель к подсвеченному элементу */
.tour-pop__beak { position: absolute; width: 14px; height: 14px; margin-left: -7px; z-index: -1;
  background: var(--paper); border: 1.5px solid var(--line); transform: rotate(45deg); }
.tour-pop--below .tour-pop__beak { top: -8px; border-right: 0; border-bottom: 0; }
.tour-pop--above .tour-pop__beak { bottom: -8px; border-left: 0; border-top: 0; }
/* pop-in при каждом шаге */
@keyframes tourPopIn { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }
.tour-pop--in { animation: tourPopIn .22s ease both; }
.tour-pop__prev, .tour-pop__next { border: 0; font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.tour-pop__prev { background: rgba(53,119,74,.12); color: var(--green-2); }
.tour-pop__prev:disabled { opacity: .4; cursor: default; }
.tour-pop__next { background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%); color: #fff; }
.tour-pop__prev:active, .tour-pop__next:active { transform: scale(.95); }

/* ===== приветственный кадр героя (Скрепка «встречает») ===== */
.tour-hello { position: absolute; inset: 0; z-index: 1002; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(16,24,18,.72);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.tour-hello[hidden] { display: none; }
.tour-hello__card { width: min(360px, calc(100vw - 40px)); text-align: center; background: var(--paper);
  color: var(--ink); border-radius: 22px; padding: 26px 24px 20px; border: 1.5px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: helloPop .32s cubic-bezier(.34,1.4,.5,1) both; }
@keyframes helloPop { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
.tour-hello__clip { display: block; margin: 0 auto 8px; width: auto; height: 116px;
  animation: helloClip 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
.tour-hello__clip svg { width: 80px; height: 96px; }
.tour-hello__clip img { display: block; width: auto; height: 116px; margin: 0 auto;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
@keyframes helloClip { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.tour-hello__title { margin: 4px 0 6px; font-size: 20px; font-weight: 800; color: var(--cover-ink); }
.tour-hello__text { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #33463a; }
.tour-hello__acts { display: flex; gap: 10px; align-items: center; }
.tour-hello__skip { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 13.5px; padding: 10px 6px; cursor: pointer; }
.tour-hello__skip:active { color: var(--ink); }
.tour-hello__go { flex: 1; border: 0; border-radius: 13px; padding: 13px 16px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%);
  box-shadow: 0 8px 20px rgba(44,95,60,.32); }
.tour-hello__go:active { transform: scale(.97); }

/* крупный металлический клип на обложке чуть заметнее */
.howto--cover svg { width: 22px; height: 26px; }

/* ===== премиум-полировка общих элементов (единый лифт по всему интерфейсу) ===== */
/* плавный отклик всех кнопок в дополнение к нажатию scale */
.btn { transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease; }
/* мягкая глубина у нейтральных кнопок; спец-варианты со своими тенями (--primary/--ai/--print/--ghost) не трогаем */
.btn:not(.btn--primary):not(.btn--ai):not(.btn--print):not(.btn--ghost) {
  box-shadow: 0 2px 8px rgba(22,42,28,.06); }
.btn:not(.btn--primary):not(.btn--ai):not(.btn--print):not(.btn--ghost):active {
  box-shadow: 0 1px 4px rgba(22,42,28,.08); }
/* главный CTA: лёгкий верхний глянец + более объёмная тень (в рамках бренда) */
.btn--primary { background: linear-gradient(165deg, #3f8757 0%, var(--green) 46%, var(--green-2) 100%);
  box-shadow: 0 8px 20px rgba(44,95,60,.38), inset 0 1px 0 rgba(255,255,255,.22); }
.btn--primary:active { box-shadow: 0 4px 12px rgba(44,95,60,.34), inset 0 1px 0 rgba(255,255,255,.16); }
/* активный сегмент iOS — чуть глубже и «поднятее» */
.seg__b.active { box-shadow: 0 2px 7px rgba(20,40,26,.16); }
/* доступный focus-ring — только для клавиатуры (:focus-visible), пальцам на телефоне не мешает */
a:focus-visible, button:focus-visible, [role="switch"]:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible,
.menu__item:focus-visible, .seg__b:focus-visible, .dot:focus-visible, .ink:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-pop { transition: none; animation: none; }
  .tour-pop--in, .tour-hello__card, .tour-hello__clip { animation: none; }
}

/* ==================================================================== */
/* ГЛАВНАЯ «Моя тетрадь» — спираль-тетрадь, стикер-карточки, маскот, нижняя навигация */
/* Реализация референса на 3D-ассетах (/assets/icons/*.png).                          */
/* ==================================================================== */
/* фон — реальная тетрадь на пружине (зелёная обложка + спираль + бумага), растягивается по контенту */
.cover { align-items: stretch; justify-content: flex-start;
  padding: 0 0 calc(94px + env(safe-area-inset-bottom, 0px));
  background-color: #24402f;
  background-image: url("/assets/notebook-bg.jpg");
  background-repeat: no-repeat; background-position: top center;
  background-size: 100% 100%; background-attachment: local; }

/* контент лежит прямо в бумажной зоне фоновой тетради (отступ слева — под спираль) */
.home { position: relative; width: 100%; padding: 26px 32px 34px 54px; }
.home__spiral { display: none; }   /* спираль теперь настоящая — из фонового PNG */

/* ── шапка: заголовок + статистика слева, маскот со стикером справа ── */
.home__top { position: relative; display: flex; align-items: flex-start; gap: 10px; }
.home__intro { flex: 1 1 auto; min-width: 0; }
.home__title { font-family: "Caveat", "ModelHand", "Segoe Script", cursive; font-weight: 700;
  font-size: clamp(30px, 9.2vw, 40px); line-height: .92; color: var(--nb-green); margin: 0; display: inline-block; }
.home__title::after { content: ""; display: block; height: 4px; width: 100%; margin-top: 2px; border-radius: 4px;
  background: linear-gradient(90deg, var(--nb-accent), rgba(138,191,119,0)); transform: skewX(-14deg); transform-origin: left; }
.home__sub { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--nb-green-2);
  font-weight: 700; opacity: .82; margin: 8px 0 0; white-space: nowrap; }
/* приветственная рукописная строка (эффект написания, демо-почерки) */
/* окно бегущей строки: фиксированная ширина, текст НЕ раздувает тетрадь (overflow скрыт) */
.home__pen { display: block; min-height: 26px; margin: 8px 0 0; overflow: hidden; }
.home__penrun { display: inline-flex; align-items: center; white-space: nowrap;
  transition: transform .13s linear; will-change: transform; }
.home #penTxt { font-size: 20px; line-height: 1.15; color: var(--nb-green-2); font-weight: 600; white-space: nowrap; }
.home__caret { display: inline-block; width: 2px; height: 19px; margin-left: 2px; background: var(--nb-accent);
  border-radius: 2px; flex: 0 0 auto; animation: penCaret 1s steps(1) infinite; }
@keyframes penCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .home__caret { animation: none; } .home__penrun { transition: none; } }
.home__stats { display: flex; gap: 15px; margin-top: 11px; flex-wrap: wrap; }
.hstat { display: flex; align-items: center; gap: 8px; }
.hstat__ic { width: 20px; height: 24px; flex: 0 0 auto; color: var(--nb-green); stroke-width: 1.7; }
.hstat__v { display: flex; flex-direction: column; line-height: 1; }
.hstat__v b { font-size: 19px; font-weight: 800; color: var(--nb-ink); font-variant-numeric: tabular-nums; }
.hstat__v span { font-size: 10.5px; color: var(--nb-muted); margin-top: 3px; }

.mascot { position: relative; flex: 0 0 auto; width: 130px; height: 116px; margin-top: 2px; }
.mascot__clip { position: absolute; left: -14px; top: 6px; width: 50px; height: auto; z-index: 2;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.22)); }
.mascot__note { position: absolute; right: 0; top: 0; width: 104px; padding: 9px 10px 11px 13px;
  background: #f7f0d6; color: #46402e; font-family: "Caveat", "ModelHand", cursive; font-weight: 600;
  font-size: 13.5px; line-height: 1.16;
  border-radius: 3px; box-shadow: 0 6px 15px rgba(0,0,0,.17); transform: rotate(2.5deg); z-index: 1; }
.mascot__note::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 48px; height: 16px; background: rgba(203,190,145,.55); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mascot__note span { color: #b5486a; }

/* ── большая зелёная карточка «Создать» ── */
.bigcard { display: flex; align-items: center; gap: 11px; width: 100%; margin: 8px 0 0; padding: 9px 12px;
  border: 0; cursor: pointer; text-align: left; border-radius: 15px; color: #fff; font-family: inherit;
  background: linear-gradient(158deg, rgba(60,131,88,.9) 0%, rgba(46,107,71,.9) 55%, rgba(35,79,54,.92) 100%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 10px 20px rgba(20,52,32,.26), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .08s ease; }
.bigcard:active { transform: scale(.99); }
.bigcard__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); }
.bigcard__ic svg { width: 19px; height: 19px; stroke: #fff; }
.bigcard__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
/* одна строка → продолговатый прямоугольник; кегль адаптивный, чтобы влезало на узких экранах */
.bigcard__txt b { font-family: "Caveat", "ModelHand", cursive; font-weight: 700;
  font-size: clamp(18px, 5.2vw, 24px); line-height: 1.1; letter-spacing: .2px; white-space: nowrap; }
.bigcard__go { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.bigcard__go img { width: 18px; height: 18px; transition: transform .15s ease; }
.bigcard:active .bigcard__go img { transform: translateX(2px); }

/* ── сетка стикер-карточек ── */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
/* компактная плитка: ряд «иконка + заголовок + стрелка», описание ниже — не растягивается */
.tile { position: relative; display: flex; flex-direction: column; text-align: left; border: 0; cursor: pointer;
  font-family: inherit; padding: 12px 13px 13px; border-radius: 16px; overflow: hidden;
  background: var(--nb-paper-2); box-shadow: 0 8px 16px rgba(30,50,34,.14), inset 0 0 0 1px rgba(255,255,255,.5);
  transition: transform .08s ease, box-shadow .2s ease; }
.tile:active { transform: scale(.985); }
.tile--photo { background: #efe9d6; }
.tile--voice { background: #efe6cf; }
.tile--ai    { background: #e6efdc; }
.tile--own   { background: #e6ecda; }
.tile__tape { position: absolute; top: -7px; left: 50%; width: 58px; height: 16px; transform: translateX(-50%) rotate(-2.5deg);
  background: rgba(204,192,150,.5); box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 1px; z-index: 3; }
.tile__head { display: flex; align-items: center; gap: 10px; padding-right: 28px; }
/* подложка-тетрадка ЗА иконкой — еле заметная (полупрозрачная), герой — сама иконка.
   Разлиновка — repeating-linear-gradient; 4 вида: линейка / клетка / линейка с полями / чистый. */
.tile__note { flex: 0 0 auto; position: relative; width: 48px; height: 44px; border-radius: 4px 6px 6px 4px;
  background: rgba(253,250,240,.55); box-shadow: 0 1px 4px rgba(30,50,34,.08), inset 0 0 0 1px rgba(120,110,80,.1);
  display: grid; place-items: center; overflow: visible; transform: rotate(-3deg); opacity: .9; }
/* спираль-переплёт слева — очень бледная */
.tile__note::before { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 4px; z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(154,143,110,.6) 0 2px, transparent 2px 7px); border-radius: 3px; opacity: .5; }
.tile__note--lined  { background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(70,110,150,.15) 10px 11px), rgba(253,250,240,.5); }
.tile__note--grid   { background:
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(90,120,160,.13) 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(90,120,160,.13) 9px 10px), rgba(253,251,242,.5); }
.tile__note--margin { background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(70,110,150,.14) 10px 11px), rgba(253,250,240,.5); }
.tile__note--margin::after { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px;
  background: rgba(200,70,70,.28); z-index: 0; }
.tile__note--plain  { background: rgba(247,242,228,.5); }
/* иконка — крупная, поверх бледной подложки, с тенью → визуальный герой */
.tile__ic { position: relative; z-index: 3; width: 42px; height: 42px; object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.24)); }
.tile__t { display: flex; align-items: flex-start; gap: 5px; margin-top: 7px;
  font-family: "Caveat", "ModelHand", cursive; font-weight: 700;
  font-size: 22px; color: var(--nb-green); line-height: 1.03; }
.tile__d { font-size: 12px; line-height: 1.37; color: #5b6a56; margin-top: 6px; }
/* стрелка — в углу плитки, чтобы не наезжать на заголовок/описание */
.tile__go { position: absolute; top: 11px; right: 11px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(46,107,71,.12); display: grid; place-items: center; z-index: 4; }
.tile__go img { width: 13px; height: 13px; }

/* ── карточка «Скрепка рядом» ── */
.clipcard { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 13px 14px;
  border: 0; cursor: pointer; text-align: left; border-radius: 16px; background: #dde8cc; font-family: inherit;
  box-shadow: 0 8px 16px rgba(30,50,34,.14), inset 0 0 0 1px rgba(255,255,255,.4); transition: transform .08s ease; }
.clipcard:active { transform: scale(.99); }
.clipcard__mascot { flex: 0 0 auto; width: 46px; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.clipcard__txt { flex: 1; min-width: 0; }
.clipcard__txt b { display: block; font-size: 15.5px; color: var(--nb-ink); }
.clipcard__txt small { font-size: 12px; color: #5b6a56; }
.clipcard__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px;
  border-radius: 999px; font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(158deg, #3c8358, var(--nb-green-2)); box-shadow: 0 5px 12px rgba(20,52,32,.3); }
.clipcard__btn img { width: 14px; height: 14px; }

/* ── нижняя навигация (fixed) — видна на всех страницах, чтобы переключаться между разделами.
   Полноэкранные оверлеи (модалки/лайтбокс/сбор почерка/тур) имеют z-index > 45 и перекрывают её. ── */
.appnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex;
  align-items: flex-end; justify-content: space-around; gap: 4px;
  padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: linear-gradient(180deg, rgba(47,85,64,.58), rgba(33,60,44,.74));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 -4px 16px rgba(0,0,0,.16); border-top: 1px solid rgba(255,255,255,.1); }
.appnav__b { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: transparent; cursor: pointer; padding: 4px 2px; color: rgba(255,255,255,.74); font-family: inherit; }
.appnav__b svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .12s ease; }
.appnav__b span { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.appnav__b.is-active { color: #fff; }
.appnav__b.is-active svg { filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.appnav__b:active svg { transform: scale(.9); }
/* FAB — рельефный зелёный кружок с белым плюсом (нарисован, без PNG-ореола) */
.appnav__fab { flex: 0 0 auto; width: 60px; height: 60px; margin: -24px 6px 0; border: 0; border-radius: 50%;
  cursor: pointer; padding: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 34%, #4aa870, #2e6b47 68%, #245638 100%);
  box-shadow: 0 9px 18px rgba(8,36,20,.5), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -4px 7px rgba(0,0,0,.28);
  transition: transform .1s ease; }
.appnav__fab svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.appnav__fab:active { transform: scale(.94); }

/* ── анимации ассетов («их нужно анимировать») ── */
@keyframes floaty  { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes floaty2 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(1.6deg); } }
@keyframes sway    { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(4deg); } }
.anim-float  { animation: floaty 4.4s ease-in-out infinite; }
.anim-float2 { animation: floaty2 5s ease-in-out infinite; }
.anim-sway   { animation: sway 3.6s ease-in-out infinite; transform-origin: 50% 85%; }
.tile--voice .tile__ic { animation-duration: 4.8s; }
.tile--own  .tile__ic  { animation-duration: 5.4s; }

/* ── появление главной (stagger) ── */
.cover.active .home__top, .cover.active .bigcard,
.cover.active .tiles .tile, .cover.active .clipcard { animation: riseIn .5s both; }
.cover.active .bigcard { animation-delay: .06s; }
.cover.active .tiles .tile:nth-child(1) { animation-delay: .12s; }
.cover.active .tiles .tile:nth-child(2) { animation-delay: .18s; }
.cover.active .tiles .tile:nth-child(3) { animation-delay: .24s; }
.cover.active .tiles .tile:nth-child(4) { animation-delay: .30s; }
.cover.active .clipcard { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .anim-float, .anim-float2, .anim-sway { animation: none; }
  .cover.active .home__top, .cover.active .bigcard,
  .cover.active .tiles .tile, .cover.active .clipcard { animation: none; }
}

/* ============ Тарифы (модалка оплаты Stars) + лимиты в профиле ============ */
.tariffs { display: grid; gap: 9px; text-align: left; margin: 4px 0 6px; }
.tariffs__load { color: var(--muted); font-size: 14px; text-align: center; padding: 12px 0; }
.tariffs__grp { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; margin: 8px 2px 1px; }
.tariff { display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 11px; }
.tariff__ic { font-size: 20px; flex: 0 0 auto; }
.tariff__info { flex: 1 1 auto; min-width: 0; }
.tariff__t { font-weight: 700; color: #2b2f27; font-size: 14.5px; }
.tariff__d { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.tariff__buy { flex: 0 0 auto; border: 0; border-radius: 11px; padding: 9px 12px;
  font-weight: 800; font-size: 13.5px; white-space: nowrap; cursor: pointer;
  color: #fff; background: linear-gradient(160deg, var(--green), var(--green-2));
  font-variant-numeric: tabular-nums; }
.tariff__buy:active { transform: scale(.97); }
.tariff--sub .tariff__buy { background: linear-gradient(160deg, #6a4bd0, #4a2a9a); }
/* Кнопка-ссылка «Купить на Яндекс.Маркете» — фирменный жёлтый ЯМ, тёмный текст. */
.tariff__ym { background: linear-gradient(160deg, #ffd633, #ffbc00); color: #1a1200; }

/* Модал лимита: контекстные тарифы (в MAX — только карточки ЯМ) */
.limit__body { margin-top: 4px; }

.limits { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 12px; margin: 12px 0 10px; display: grid; gap: 2px; }
.limits[hidden] { display: none; }
.limits__row { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.limits__row:last-child { border-bottom: 0; }
.limits__k { font-size: 13.5px; color: #43493d; }
.limits__v { font-size: 14px; font-weight: 800; color: var(--green-2); font-variant-numeric: tabular-nums; }
.profile__buy { width: 100%; margin: 2px 0 6px; }

/* 🎟 Промокод в профиле */
.promo { margin: 10px 0 6px; padding: 12px; border: 1px dashed var(--accent, #3d6fd6);
  border-radius: 14px; background: rgba(61,111,214,.06); }
.promo__ttl { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.promo__hint { font-size: 12.5px; color: var(--muted, #6a7385); margin: 0 0 8px; line-height: 1.35; }
.promo__row { display: flex; gap: 8px; }
.promo__inp { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; background: #fff; }
.promo__inp::placeholder { text-transform: none; letter-spacing: 0; color: #a7adba; }
.promo__btn { flex: 0 0 auto; white-space: nowrap; }
.promo__msg { margin-top: 8px; font-size: 13px; font-weight: 600; }
.promo__msg--ok { color: #1f9d55; }
.promo__msg--err { color: #d64545; }

/* ⭐ маркер ИИ-функций + предрасчёт листов */
.ai-star { font-size: .9em; filter: saturate(1.2); }
/* в плитке звезда — отдельный flex-элемент справа от заголовка, не переносится вниз
   («не скачет» при длинных названиях). Размер чуть меньше, выровнена по верху строки. */
.tile__t .ai-star { flex: 0 0 auto; margin-top: .12em; font-size: .72em; }
.ai-legend { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted, #6a7385); }
.pdfcost { color: #1a3a6b; font-weight: 600; }

/* ===== Пикер предмета/языка (Решебник / Переводчик) ===== */
.picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 16px; }
.picker--lang { grid-template-columns: repeat(3, 1fr); }
.picker__b {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
  padding: 8px 4px 7px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink); cursor: pointer; font: inherit;
  transition: transform .12s, border-color .15s, box-shadow .15s, background .15s;
}
.picker__b img {
  width: 100%; height: 52px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .12));
}
.picker--lang .picker__b img { height: 60px; }
.picker__b span { font-size: 11.5px; line-height: 1.15; font-weight: 600; text-align: center; }
.picker__b:active { transform: scale(.96); }
.picker__b.active {
  border-color: var(--green); background: #eef5ec;
  box-shadow: 0 2px 10px rgba(46, 107, 71, .18), inset 0 0 0 1px var(--green);
}
@media (max-width: 360px) {
  .picker { grid-template-columns: repeat(3, 1fr); }
  .picker--lang { grid-template-columns: repeat(2, 1fr); }
}
/* Направление перевода: язык оригинала (select, «Авто» по умолчанию) */
/* Юридические документы (Политика/Оферта): широкая карточка + прокручиваемый текст */
.modal__card--legal { max-width: 520px; text-align: left; }
.legal__body { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  margin: 4px 0 14px; color: #3a4034; font-size: 13.5px; line-height: 1.55; }
.legal__body p { margin: 0 0 9px; }
.legal__body p.legal__h { margin: 14px 0 6px; color: #2b2350; }
.legal__body ul { margin: 4px 0 10px; padding-left: 20px; }
.legal__body li { margin: 2px 0; }
.legal__body hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.legal__body b { color: #2b2350; }
.legal-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.legal-link { flex: 1 1 200px; }

.trans-src { margin: 4px 0 14px; }
.trans-src select {
  width: 100%; padding: 11px 38px 11px 14px; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b47' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.trans-src select:focus { outline: none; border-color: var(--green); box-shadow: 0 2px 10px rgba(46, 107, 71, .16); }

/* Счётчик объёма под полем ввода (аудит 2026-07: пользователь не видел ни лимита ИИ,
   ни во сколько листов выльется текст, — узнавал об этом только из ошибки). */
.edstat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 6px 4px 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.edstat__sep { opacity: .5; }
.edstat__saved { margin-left: auto; color: #4a8a5f; opacity: .85; }
.edstat--warn { color: #a06a2c; }
.edstat--over { color: #c0392b; }

/* ============================================================================
   ДОСТУПНОСТЬ ТАЧ-ЦЕЛЕЙ (аудит 2026-07, Блок 1.1)
   Мелкие круглые контролы («?», точки цветов, кружки чернил, сегменты) визуально
   должны остаться мелкими — они часть «тетрадной» эстетики. Но палец промахивается:
   .help 18px, .dot 20px, .ink 38px при рекомендованных 44. Расширяем ЗОНУ НАЖАТИЯ
   прозрачным ::after поверх элемента — вид не меняется ни на пиксель.
   ============================================================================ */
.help, .dot, .ink, .mtool, .seg__b { position: relative; }
/* круглые контролы — круглый хитбокс по центру */
.help::after, .ink::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
}
/* точки-цвета идут плотным рядом: 44px хитбоксы перекрыли бы соседей и «съедали» нажатия.
   32px — максимум, укладывающийся в шаг сетки (20px точка + gap), но это уже +60% площади. */
.dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
}
/* прямоугольные контролы — растягиваем по высоте, ширину не трогаем */
.mtool::after, .seg__b::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 44px; min-height: 100%;
}

/* ============================================================================
   АДАПТИВ 360–430 px (аудит 2026-07: медиазапросов было два, дыра на весь парк телефонов)
   Ничего не переверстываем — только снимаем горизонтальное переполнение на узких
   экранах и разжимаем поля на широких.
   ============================================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
.sheet, .modal__card, .ai-out, .helpbox { max-width: 100%; }
/* длинные ссылки/слова в текстовых блоках не должны растягивать страницу */
.helpbox, .ai-out__body, .legal__body, .tariff__d, .limit__method-d { overflow-wrap: anywhere; }

@media (max-width: 400px) {
  .sheet { padding-left: 14px; padding-right: 14px; }
  .lbl { margin-top: 16px; }
  .inks { gap: 9px; }
  .ink { width: 34px; height: 34px; }
  .seg__b { padding-left: 4px; padding-right: 4px; font-size: 12px; }
}
@media (min-width: 480px) {
  /* На широких экранах (планшет, десктоп-браузер) лист не должен растягиваться на всю ширину */
  .sheet { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* ============================================================================
   ТЁМНАЯ СХЕМА ПЛАТФОРМЫ (аудит 2026-07, Блок 1.1)
   Принцип: ЛИСТ ОСТАЁТСЯ СВЕТЛЫМ — это фотография результата, тёмная «бумага»
   врала бы о том, что получится на печати. Тёмной делаем только обвязку:
   фон сцены за листом, тосты, модалки-подложки. data-theme ставит applyPlatformTheme().
   ============================================================================ */
:root[data-theme="dark"] body { background: #0f1712; }
:root[data-theme="dark"] .modal { background: rgba(0, 0, 0, .62); }
:root[data-theme="dark"] .toast { background: #223027; color: #eef3ee; }