/* Стили настоящего приложения поверх основы (base, core, more, extra): приложение во всё окно, поля форм, отчёт и печать,
   бабочки настроения, детали экранов. Подключается после них (index.html), поэтому может перебивать их правила. */
body.real-app{background:var(--bg,#fff)}
body.real-app .app{position:fixed;inset:0;width:auto;height:auto}
.f-in{flex:1;min-width:0;height:40px;padding:0;border:0;outline:0;background:none;font-size:15.5px;font-weight:600;color:var(--text);font-family:inherit}
select.f-in{appearance:none;-webkit-appearance:none}
.f-in::placeholder{color:var(--muted);font-weight:500}
/* Пустая дата или время (класс no-val ставят ui.js и app.js): подсказка браузера («дд.мм.гггг», «--:--») серая, как подсказки других полей,
   а не жирная, будто дата уже выбрана. Пока человек набирает в поле, текст обычного цвета */
.f-in.no-val:not(:focus){color:var(--muted);font-weight:500}
.app[data-theme="dark"] .f-in,.app[data-theme="dark"] input.time{color-scheme:dark}
label.fld{cursor:text}
input.time{width:100%;min-width:0;border:0;outline:0;text-align:center;font-family:inherit;color:inherit}
input.time::-webkit-calendar-picker-indicator{display:none}
.idot{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:var(--muted);background:var(--surface-2);cursor:pointer}
.idot svg.lucide{width:17px;height:17px}
.idot.on{color:var(--on-accent);background:var(--accent)}
form .lg{margin:0 0 4px}
form .btn-block+.btn-block,.pad>.btn-block+.btn-block,.sheet>.btn-block+.btn-block{margin-top:10px}
.sheet-save{margin-top:6px}
.dur-money b{color:var(--text)}
.dd-add{margin-bottom:14px}
button.blk{display:block;width:100%;text-align:left}
button.blk.rel{display:flex}
.tl-lane button.blk{position:absolute;width:auto}
/* Задачи и покупки: галочка — настоящая кнопка, название открывает правку */
button.cb{position:relative;padding:0;cursor:pointer}
/* Кружок маленький, а место для пальца — 44×44 невидимой рамкой (как у .pb-filter): касание рядом с кружком отмечает дело, а не открывает правку.
   Рамка не заходит ни на соседнюю строку (у строки поля 11 px сверху и снизу), ни на название (оно в 12 px справа) */
button.cb::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.as-col{display:block;text-align:left}
form.quick{cursor:text}
input.as-input{display:block;width:100%;border:0;border-bottom:2px solid var(--accent);outline:0;border-radius:0;background:none;color:var(--text);font-family:inherit}
input.as-input::placeholder{color:var(--muted)}
.group h2 .push{margin-left:auto;font-size:13px}
.icon-btn.sm-x{width:40px;height:40px;color:color-mix(in srgb,var(--muted) 60%,transparent)}
.icon-btn.sm-x svg.lucide{width:15px;height:15px}
.rev small{font-weight:700}
/* Привычки, отсчёт, люди */
form[data-picked-kind="check"] .count-only{display:none}
form[data-form="report"]:not([data-picked-period="own"]) .own-only{display:none}
.two-btn.one .btn{flex:1}
.hweeks .w4{background:color-mix(in srgb,var(--c) 38%,transparent)}
.tile.added{opacity:.45}
.rowi.dim{opacity:.55}
button.cd{display:block;width:100%;text-align:left;color:var(--text);cursor:pointer}
.cd.past{opacity:.55}
.cd .bar{display:block}
.card.bday .chip{flex:none}
/* На узком телефоне рядом с кнопкой «В отсчёт» строки дня рождения («Исполнится 27») переносятся, а не обрезаются */
.card.bday :is(.r-title,.r-sub){white-space:normal;overflow-wrap:anywhere}
/* Подписи, которые на телефоне 360–375 px не помещаются, переносятся на вторую строку, а не обрезаются многоточием:
   дата дня рождения в «Людях», «1 сентября · Обязательный расход» в «Регулярных», «выписка файлом — Excel или CSV» в окне «Банки»,
   подпись поля «Amount for september 2026» в окне регулярной операции (стиль «Мягкий», EN) */
.rowi:is([data-go="people"],[data-sheet="regular"]) .r-sub,.sheet .lg .rowi .r-sub{white-space:normal;overflow-wrap:anywhere}
/* ...но не больше двух строк: подписью строки бывает и заметка о человеке (до 300 знаков, в «Поиске» — до 2000), которая
   раздула бы строку на полэкрана. Две строки вмещают и дату дня рождения, и «1 сентября · Обязательный расход»; длиннее — многоточие */
.rowi:is([data-go="people"],[data-sheet="regular"]) .r-sub,.sheet .lg .rowi .r-sub,.rowi[data-stuck] .r-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.fld .f-l{white-space:normal;overflow-wrap:anywhere}
.note-text{margin:0;white-space:pre-wrap;color:var(--text);font-size:14.5px;line-height:1.5}
.wd:disabled{cursor:default}
/* Плашки в клетках месяца растут вместе с клеткой: на узком телефоне мелкие (core.css), на широком экране — крупнее и читаемее */
.month .cell{container-type:inline-size}
@container (min-width:62px){.month .ev{font-size:10.5px;padding:2px 5px;border-radius:6px}.month .more{font-size:10.5px}}
@container (min-width:78px){.month .ev{font-size:11.5px;padding:3px 7px;border-radius:7px}.month .more{font-size:11px;padding-left:7px}.month .evs{gap:3px}}
@container (min-width:110px){.month .ev{font-size:12.5px;padding:4px 9px}}
/* Список дня: строка смены — крупная, по ней легко попасть пальцем, стрелка подсказывает, что она открывается */
.day-sheet .blk.rel,.panel .blk.rel{align-items:center;min-height:50px;padding:10px 12px 10px 14px;border-radius:14px}
.day-sheet .blk.rel b,.panel .blk.rel b{font-size:15.5px}
.day-sheet .blk.rel small,.panel .blk.rel small{font-size:13px}
.day-sheet .blk.rel .wl-t,.panel .blk.rel .wl-t{width:44px;font-size:13.5px}
.blk.rel .go{flex:none;display:grid;place-items:center;margin-left:2px;opacity:.55}
.blk.rel .go svg.lucide{width:16px;height:16px}
.day-sheet .wk-list,.panel .wk-list{gap:8px}
.day-sheet .task,.panel .task{min-height:50px}
/* Шапка на компьютере: если кнопки не помещаются рядом с названием, они уходят на вторую строку, а не наезжают на правую панель */
@container (max-width:1000px){.app[data-device="desktop"] .top{flex-wrap:wrap;row-gap:10px}.app[data-device="desktop"] .top-actions{flex-wrap:wrap;row-gap:8px}}
/* Правая панель на компьютере: привычки дня отмечаются нажатием на кольцо */
button.habit-mini{cursor:pointer;color:inherit;font:inherit}
.panel .card{margin-top:16px}
/* Мастер «по одному вопросу»: виден только текущий шаг */
.wiz-step{display:none}
form[data-cur="0"] .wiz-step[data-step="0"],form[data-cur="1"] .wiz-step[data-step="1"],form[data-cur="2"] .wiz-step[data-step="2"],form[data-cur="3"] .wiz-step[data-step="3"],form[data-cur="4"] .wiz-step[data-step="4"],
form[data-cur="5"] .wiz-step[data-step="5"],form[data-cur="6"] .wiz-step[data-step="6"],form[data-cur="7"] .wiz-step[data-step="7"]{display:block}
.steps i{cursor:pointer}
.wiz-step .q{margin:14px 0 10px;font-size:20px;line-height:1.2;font-weight:var(--head-w);letter-spacing:var(--head-track)}
.wiz-step{min-height:170px}
/* Экран работы: лишнее прячется по выбору (учёба — без дохода и премий; ставка доп. часа — только «почасово»; поля плана — только у плана) */
form[data-picked-extra="none"] .hourly-only,form[data-picked-extra="fixed"] .hourly-only,form:not([data-picked-extra="fixed"]) .fixed-only,form:not([data-picked-bonus="plan"]) .plan-only{display:none}
.mini-in{flex:none;display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:13px}
.mini-in .f-in{width:64px;height:40px;padding:0 8px;border-radius:10px;text-align:right;background:var(--surface-2)}
.app[data-variant="b"] .lg .mini-in .f-in{background:var(--bg)}
.mini-in em{font-style:normal;min-width:18px}
/* Мелочи форм и дня: у учёбы прячутся поля работы (work-only), поле-кнопка, бледное значение, сделанное дело на шкале «По часам» */
form[data-picked-kind="study"] .work-only{display:none}
form[data-picked-kind="work"] .study-pick{display:none}
.ob-times{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ob-times em{font-style:normal;color:var(--muted)}
button.fld.as-fld{width:100%;text-align:left;cursor:pointer}
.f-v.dim{color:var(--muted)}
.tl-lane .blk.is-done{opacity:.5}
.tl-lane .blk.is-done b{text-decoration:line-through}
/* «хвост» вчерашней ночной смены — та же смена, чуть бледнее: видно, что она началась накануне */
.blk.is-tail{opacity:.72}
label.rowi.as-label{cursor:pointer}
/* Панель вкладок: строку тянут за «ручку» */
.grip{touch-action:none}
/* Поднятое дело матрицы едет копией поверх экрана (drag.js) — квадрат с прокруткой её не обрезает; на месте остаётся бледная строка */
.mx-q .task.dragging{opacity:.35}
.app .mx-q.mx-ghost{position:fixed;z-index:30;margin:0;padding:0 10px;min-height:0;overflow:visible;pointer-events:none;border-radius:14px;background:var(--surface);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.mx-ghost .task{border-bottom:0}
.mx-q.drop{outline:2px dashed color-mix(in srgb,var(--c) 70%,transparent);outline-offset:-4px}
.mod-row.dragging{position:relative;z-index:2;border-radius:14px;background:var(--surface-2);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.seg.sm button:disabled{opacity:.35}
/* Значок-эмодзи вместо нарисованного (ic() в ui.js): так приходят значки записей из прежнего приложения (public/) и свои эмодзи из «Больше значков» */
.emo{display:inline-grid;place-items:center;font-style:normal;line-height:1;font-size:1.15em}
.bub .emo,.ring .emo,.pb-ic .emo{font-size:18px}
/* Финансы: сумма вводится прямо в крупное поле, на телефоне открывается цифровая клавиатура */
label.amount{display:flex;align-items:baseline;justify-content:center;gap:8px;cursor:text}
.amount-in{width:5.2ch;min-width:2ch;max-width:70%;border:0;outline:0;background:none;color:var(--text);font:inherit;letter-spacing:inherit;text-align:right;field-sizing:content}
.amount-in::placeholder{color:color-mix(in srgb,var(--muted) 55%,transparent)}
.money b.warn{color:var(--warn)}
/* Состояние */
.f-line{display:block;width:100%;margin-top:16px;padding:12px 14px;border:0;outline:0;border-radius:14px;background:var(--surface);color:var(--text);font:inherit}
.app[data-variant="b"] .checkin .f-line{background:var(--surface-2)}
.f-line::placeholder,.f-ta::placeholder{color:var(--muted)}
.f-ta{display:block;width:100%;margin:12px 0;padding:14px;border:0;outline:0;resize:vertical;border-radius:16px;background:var(--surface-2);color:var(--text);font:inherit;line-height:1.45}
.chip.ghost{background:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--muted) 40%,transparent);color:var(--muted)}
.chip.sel{position:relative;padding-right:10px}
.chip:disabled{opacity:.4;cursor:default}
.chip.sel select{max-width:150px;border:0;outline:0;background:none;color:inherit;font:inherit;font-weight:inherit;cursor:pointer}
.app select option{background:var(--surface);color:var(--text)} /* Варианты выпадающего списка в цвет темы: на Windows браузер рисует список сам и берёт цвета у вариантов */
.lvl{display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr) 26px;align-items:center;gap:12px;min-height:44px;font-size:14.5px}
.lvl b{text-align:right;font-variant-numeric:tabular-nums}
.lvl.big{margin:6px 0 4px;font-weight:700}
.emo-levels{margin:12px 0 2px}
/* «Фон карточки»: цветов десять — переносим на вторую строку, чтобы все были видны без прокрутки вбок */
.dots.bgs{flex-wrap:wrap;overflow:visible}
/* Политика конфиденциальности: спокойный читаемый текст */
.card.policy h3{margin:0 0 8px;font-size:16px;font-weight:var(--head-w)}
.card.policy p{margin:0 0 8px;font-size:14.5px;line-height:1.5;color:var(--text)}
.card.policy p:last-child{margin-bottom:0}
.set-page>.back{margin:0 0 6px}
/* Экран кода: неверный код — точки коротко «качают головой»; строка подсказки держит высоту, чтобы кнопки не прыгали */
.pin-note{min-height:20px;margin:14px 0 0}
/* Экран кода не прокручивается ни на какой высоте: отступы, замок и кнопки цифр ужимаются вместе с высотой экрана,
   а на очень низком экране (телефон лёжа) замок прячется. Текстовые кнопки внизу («Забыли код?», «Отмена») стоят в строку */
.ob-card.pin{overflow:hidden}
.pin .pin-top{flex:1 1 auto;min-height:0;overflow:hidden}
.pin .ob-hero{padding:clamp(8px,7vh,64px) 28px 0;gap:clamp(8px,2.2vh,18px)}
.pin .pin-note{margin-top:clamp(4px,1.6vh,14px)}
.pin .ob-foot{padding:clamp(4px,1.5vh,12px) 20px clamp(8px,3vh,26px);gap:clamp(2px,1vh,10px)}
.pin .keys{gap:clamp(6px,1.7vh,14px);margin:clamp(4px,1.7vh,14px) auto 6px}
.pin .key{width:clamp(40px,8vh,64px);height:clamp(40px,8vh,64px)}
.pin-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px}
@media (max-height:540px){.pin .ob-logo{display:none}.pin .ob-hero h1{font-size:21px}}
.pin-dots.shake{animation:pin-shake .36s ease}
@keyframes pin-shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.pin-dots.shake{animation:none}}
.pin .keys span{display:block}
.pin .key:disabled{opacity:.4}
.report>.sub{margin:4px 4px 12px;font-weight:700;color:var(--muted)}
/* Бегунок: цветная полоска с белой ручкой; --v — насколько она залита */
.rng{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;--c:var(--accent);--v:50%;touch-action:pan-y}
.rng::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,var(--c) var(--v),color-mix(in srgb,var(--muted) 18%,transparent) var(--v))}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-6px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.rng::-moz-range-track{height:8px;border-radius:8px;background:color-mix(in srgb,var(--muted) 18%,transparent)}
.rng::-moz-range-progress{height:8px;border-radius:8px;background:var(--c)}
.rng::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.rng:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.own-emo{margin:8px 0 4px}
.own-emo-add{display:flex;align-items:center;gap:10px}
.own-emo-add .f-line{flex:1;min-width:0;margin:0}
/* Свои эмоции с ✕ — убрать из списка */
.own-emo-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.own-emo-t{flex-basis:100%;font-size:12.5px;font-weight:700;color:var(--muted)}
.chip.own-x{gap:5px;padding-right:9px;max-width:100%}
.chip.own-x svg.lucide{width:14px;height:14px;color:var(--muted)}
.time-chip{gap:6px;padding-right:6px}
.time-chip button{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:inherit;opacity:.8}
.time-chip button svg.lucide{width:13px;height:13px}
.time-add{display:inline-flex;align-items:center;gap:8px}
input.time.sm{width:auto;height:40px;padding:0 10px;font-size:15px}
.med-row .btn.sm{flex:none}
.app[data-device="phone"] .med-row{flex-wrap:wrap;row-gap:10px;padding:12px 0}
.app[data-device="phone"] .med-row .r-main{flex:1 1 calc(100% - 64px)}
.app[data-device="phone"] .med-row .btn.sm{flex:1;justify-content:center}
.med-row .btn-ghost.on{background:color-mix(in srgb,var(--muted) 22%,transparent)}
.med-row.answered .btn:not(.on){opacity:.45}
/* «Не уходит на сервер»: причина видна целиком, кнопка — строкой ниже, под текстом (колонка настроек узкая и на компьютере) */
.rowi[data-stuck]{flex-wrap:wrap;row-gap:8px}
.rowi[data-stuck] .r-sub{white-space:normal}
.rowi[data-stuck] .r-main{flex:1 1 calc(100% - 64px)}
.rowi[data-stuck] .btn.sm{margin-left:52px}
.px.now-px{box-shadow:0 0 0 2px var(--accent)}
.tm+.bub{display:none}
.app[data-device="desktop"] .tm+.bub{display:grid}
@page{margin:14mm}
/* Печать и «Сохранить в PDF»: приложение отклеивается от окна и раскладывается на столько листов, сколько нужно.
   Ничего не ужимаем и не обрезаем: длинный текст переносится, большой блок продолжается на следующем листе.
   Важно снять и position:fixed (иначе печатается только первый экран), и container-type (такой блок нельзя разорвать между листами). */
@media print{
  .side,.tabbar,.fab,.panel,.paintbar,.toast,.overlay,.no-print,.movebar,.top .back,.top-actions{display:none !important}
  html,body,.app,.main,.screen,.scroll,.wrap,.report{position:static !important;inset:auto !important;display:block !important;width:auto !important;max-width:none !important;height:auto !important;max-height:none !important;min-height:0 !important;overflow:visible !important;container-type:normal !important;background:#fff !important}
  /* Печатаем всегда светлым, даже если в приложении тёмная тема: тёмные буквы на белом листе. Цвета заданы с !important —
     иначе правило тёмной темы (.app[data-theme="dark"]) сильнее, и на бумаге остаются светлые буквы. --mood-ink — слова настроения
     темнее цвета лица, как в светлой теме. color-scheme — чтобы и цвета браузера по умолчанию были светлыми.
     Плавная смена цвета при печати выключена: иначе браузер успевает снять на лист ещё светлые буквы тёмной темы */
  :root{color-scheme:light !important}
  .app{--bg:#fff !important;--surface:#fff !important;--surface-2:#fff !important;--text:#14110e !important;--muted:#5b5147 !important;--line:#d9d2c9 !important;--shadow:none !important;--mood-ink:56% !important;color:#14110e !important}
  .app,.app *{transition:none !important}
  body,body *{font-family:'Inter',system-ui,sans-serif !important} /* Один шрифт на всём листе */
  .card,.lg,.charts,.rep-day,.rep-log,.rep-e,.rep-page{break-inside:auto}
  .card{box-shadow:none !important}
  .rep-table tr,.rep-cal,.rc-grid,.chart-row,.rep-med,.fld{break-inside:avoid}
  .r-title,.rep-day .r-title,.rep-e-h,.rep-e-f dd,.rep-e-x{overflow:visible !important;text-overflow:clip !important;white-space:normal !important;overflow-wrap:anywhere}
  .hstats b,.hstats.rep-stats b,.rep-table .rt-date b,.rep-table .rt-mood{white-space:normal !important}
  .rep-table{table-layout:fixed;width:100%}
  .rep-table td,.rep-table th{overflow-wrap:anywhere}
  .report.bw{filter:none}
  .report.bw .rep-page{filter:grayscale(1)}
}
.ava{text-transform:uppercase}
/* Друзья и общее */
.code-row{gap:10px}
.code-row input.code-in{flex:1;min-width:0;border-bottom:0;font-size:15px;padding:6px 0}
.note .code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.06em;color:var(--text);user-select:all}
.fld.tall{align-items:flex-start;padding:14px 0}
/* Длинный текст (ui.js, areaField): строки переносятся, поле растёт в высоту под текст. Значок и подпись стоят напротив первой строки */
.fld.area{align-items:flex-start;padding:7px 0}
.fld.area>svg,.fld.area>.f-l{margin-top:10px}
textarea.f-in.f-area{display:block;height:auto;min-height:40px;padding:10px 0;font-family:inherit;line-height:20px;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
textarea.f-area::placeholder{color:var(--muted);font-weight:500}
/* «+» в строке быстрого ввода (ui.js, quickLine) — кнопка «Добавить» 40×40 в начале строки, поле занимает всю высоту строки.
   Когда в строке что-то набрано, «+» окрашивается — видно, что его можно нажать */
.quick .quick-go{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:0 -10px 0 -11px;padding:0;border-radius:12px;color:inherit;font:inherit}
.quick .quick-go:active{background:color-mix(in srgb,var(--text) 8%,transparent)}
.quick:has(input:not(:placeholder-shown)) .quick-go{color:var(--accent-ink)}
.quick input{align-self:stretch}
.fld.tall>svg,.fld.tall>.f-l{margin-top:6px}
.fld .f-v.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:0}
.fld .f-v.chips .chip{height:40px;padding:0 12px;font-size:13px}
.t-with{display:inline-flex;align-items:center;gap:4px}
.t-with svg{width:13px;height:13px}
.ava.xs{width:22px;height:22px;font-size:11px}
.linkbox .btn-text:disabled,.sheet-save:disabled{opacity:.45;pointer-events:none}
/* Записи друзей в моём календаре: контуром, с первой буквой имени — видно, что это не моё и менять нельзя */
.app .ev.fr,.app[data-palette] .ev.fr{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 70%,transparent)}
.ev.fr i{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-right:3px;border-radius:50%;font-style:normal;font-size:.85em;font-weight:800;color:#fff;background:var(--c);vertical-align:-.08em;text-transform:uppercase}
.app .blk.fr,.app[data-variant="b"] .blk.fr,.app[data-palette] .blk.fr{background:transparent;color:var(--text);border-left:0;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 70%,transparent)}
.blk.rel.fr{cursor:default}
.tl-lane .blk.fr{position:absolute;left:0;right:0}

/* «Больше цветов» и «Больше значков»: кнопка «+» справа от строки точек и панель под ней (js/pickers.js) */
.more-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:var(--muted);background:var(--surface-2);transition:transform .22s var(--ease),background-color .18s,color .18s}
.more-btn svg.lucide{width:17px;height:17px}
.more-btn.open{transform:rotate(45deg);color:var(--on-accent);background:var(--accent)}
.morebox{display:grid;gap:10px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
.morebox[hidden]{display:none}
.spectrum{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.spc{aspect-ratio:1;border-radius:7px;background:var(--c);cursor:pointer;transition:transform .14s var(--ease)}
.spc:active{transform:scale(.88)}
.spc.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c);position:relative;z-index:1}
.own-pick{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--muted);font-size:14.5px;font-weight:600;cursor:pointer}
.own-pick>svg.lucide{flex:none;width:19px;height:19px}
.own-pick span{flex:1}
.own-pick input[type=color]{flex:none;width:48px;height:34px;padding:0;border:0;border-radius:10px;background:none;cursor:pointer}
.own-emoji{flex:none;width:88px;height:40px;text-align:center;font-size:21px;border:0;border-radius:12px;color:var(--text);background:var(--surface-2)}
.more-search{width:100%;height:40px;padding:0 14px;border:0;border-radius:12px;font:inherit;font-size:15px;color:var(--text);background:var(--surface-2)}
.chips.cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0;padding:1px}
.chips.cats .chip{height:40px;padding:0 12px;font-size:13px}
.more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;max-height:232px;overflow-y:auto;padding:2px;overscroll-behavior:contain}
.more-grid .idot{width:auto;height:auto;aspect-ratio:1}
.more-grid .idot .emo{font-size:21px}
.more-grid .note{grid-column:1/-1;margin:6px 0}

/* Картинка-фон привычки (core/habit-bg.js): в кольце строки, квадратиком в окне и мягкой «шапкой» карточки, которая растворяется в фоне */
.ring.pic::before{content:'';position:absolute;inset:11%;border-radius:50%;background:var(--hbg);box-shadow:inset 0 0 0 1px #0000000f}
.ring.pic>svg.lucide,.ring.pic>.emo{position:relative;color:var(--hink)}
.cdot.sq.pic{background:var(--hbg);opacity:1;box-shadow:inset 0 0 0 1px #00000014}
.cdot.sq.pic.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
/* «Оформление» в окне привычки — свёрнутый блок с картинками: в строке название и маленький образец нынешней картинки,
   стрелка поворачивается, когда блок раскрыт */
.hlook>summary{list-style:none;cursor:pointer;border-bottom:0}
.hlook>summary::-webkit-details-marker{display:none}
.hlook[open]>summary{border-bottom:1px solid var(--line)}
.hlook>summary>svg.lucide:last-child{flex:none;transition:transform .2s}
.hlook[open]>summary>svg.lucide:last-child{transform:rotate(180deg)}
.hlook>summary>.f-v{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.hlook-pic{flex:none;width:28px;height:28px;border-radius:9px;background:var(--hbg);box-shadow:inset 0 0 0 1px #00000014}
.hlook>.dots.bgs{padding:10px 3px 12px}
.hcard.pic{position:relative;background:var(--bg)}
.hcard.pic::before{content:'';position:absolute;inset:0 0 auto;height:min(44%,330px);background:var(--hbg);opacity:.9;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 38%,#0000);mask-image:linear-gradient(180deg,#000 38%,#0000)}
.hcard.pic>*{position:relative}
.hcard.pic .hcard-top .icon-btn{background:color-mix(in srgb,var(--surface) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hcard.pic .hcard-body>.ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hcard.pic .hcard-body>.ring>svg.lucide,.hcard.pic .hcard-body>.ring>.emo{position:relative}
.hcard-body>.ring .emo{font-size:54px}

/* Покупки: «ручка» порядка в строке, количество справа, карандаш у своего списка в окне «Списки» */
.swipe-fg>.grip{display:grid;place-items:center;width:22px;margin-left:-6px}
.swipe.dragging{position:relative;z-index:2;opacity:.92;box-shadow:var(--shadow)}
.row-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:40px;text-align:left}

/* Событие «Весь день» — время не нужно; значок события и пометка «приватное» в строке дня */
form[data-sw-allday="1"] .times,form[data-sw-allday="1"] .dur{display:none}
.blk-ic{display:inline-grid;vertical-align:-3px;margin-right:5px}.blk-ic svg.lucide{width:15px;height:15px}.blk-ic .emo{font-size:14px}.blk-ic.dim{margin:0 0 0 6px;opacity:.55}

/* Дело: галочка цветом дела, красная точка у «важно + срочно», «+» в квадранте матрицы */
.cb.tc{border-color:color-mix(in srgb,var(--c) 70%,transparent)}.cb.tc.on,.task.done .cb.tc{background:var(--c);border-color:var(--c);color:#fff}
.t-hot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#e5484d;vertical-align:2px}
.mx-q h3 .mx-add{margin-left:6px;width:28px;height:28px}.mx-q h3 .mx-add svg.lucide{width:16px;height:16px}
.fg.flat{margin:0}

/* Подробности смены в дне; нажимаемый месяц в отчёте за год */
.wl-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--muted);white-space:normal;line-height:1.35}
button.chart-row.as-row{width:100%;text-align:left;cursor:pointer}
.day-sheet .blk.rel b,.panel .blk.rel b{flex:1;min-width:0}
.blk b .wl-sub{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Привычки: мастер из двух шагов (у новой), частота, напоминания-фишки, фраза, сворачиваемые группы, число серии, галочка на значке */
form[data-step="1"] .step-2,form[data-step="2"] .step-1{display:none}
form[data-step="all"] .only-wizard{display:none}
form[data-picked-frequency="interval"] .days-only,form:not([data-picked-frequency="interval"]) .interval-only{display:none}
.rems{display:grid;gap:10px}.rem-add{display:flex;align-items:center;gap:10px}
.time.sm{height:40px;padding:0 12px;border:0;border-radius:12px;font:inherit;font-weight:700;color:var(--text);background:var(--surface-2)}
.chip[data-rem-del] svg.lucide{width:14px;height:14px;opacity:.8}
.hquote{max-width:440px;margin:2px 0 0;font-size:15px;font-style:italic;color:var(--muted)}
button.st.st-fold{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 40px);text-align:left;cursor:pointer}
.st-fold span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.st-fold svg.lucide{width:16px;height:16px;transition:transform .2s var(--ease)}.st-fold.shut svg.lucide{transform:rotate(-90deg)}
.ring-btn{position:relative}.ring-ok{position:absolute;right:-3px;bottom:-3px;display:none;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;background:var(--ok,#34b89a);box-shadow:0 0 0 2px var(--surface)}
.ring-btn.is-done .ring-ok{display:grid}.ring-ok svg.lucide{width:11px;height:11px;stroke-width:3.4}
.streak-n{flex:none;display:inline-flex;align-items:center;gap:3px;min-width:44px;justify-content:flex-end;color:var(--muted)}
.streak-n b{font-size:17px;font-weight:800;color:var(--text)}.streak-n svg.lucide{width:15px;height:15px;color:#f5a623}
.tile small{display:block;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--muted)}

/* «Состояние»: дополнительная шкала отметки и поле «Когда» */
.rng-row{display:flex;align-items:center;gap:12px}.rng-row .rng{flex:1}.rng-row b{min-width:22px;text-align:right;font-weight:800}.rng-row.unset b{color:var(--muted)}.rng-row.unset .rng{opacity:.55}
.checkin-form .fld.when{margin-top:6px;border-bottom:0}
/* Пустое «Когда» — серое «сейчас» вместо «дд.мм.гггг --:--»; нажали — видно обычное поле даты и времени */
.when-box{position:relative;flex:1;min-width:0;display:flex;align-items:center}.when-box .f-in{width:100%}
.when-now{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:15.5px;font-weight:500}
.fld.when.is-empty:not(:focus-within) .when-now{display:block}
.fld.when.is-empty:not(:focus-within) .f-in{color:transparent}
.fld.when.is-empty:not(:focus-within) .f-in::-webkit-datetime-edit{color:transparent}
/* Энергия: подписи по краям пяти столбиков */
.scale-ends{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:12px;font-weight:600;color:var(--muted)}

/* «+N» в клетке месяца — с кружками цветов спрятанных записей; свободное время в дне нажимается */
.month .more i{display:inline-block;width:6px;height:6px;margin-left:3px;border-radius:50%;background:var(--c);vertical-align:1px}
.tl-lane{cursor:cell}

/* Поиск по всему */
.search-in{display:flex;align-items:center;gap:10px;height:46px;margin:4px 20px 6px;padding:0 14px;border-radius:14px;background:var(--surface-2);color:var(--muted)}
.search-in svg.lucide{flex:none;width:18px;height:18px}.search-in input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--text)}
.note.center{text-align:center;margin:18px 20px}

/* Итог смены с разбивкой переносится на вторую строку, если не помещается */
.dur{flex-wrap:wrap}.dur-money small{font-size:12.5px;color:var(--muted)}

/* Код от 4 до 6 цифр: необязательные точки бледнее, кнопка «Готово» на клавиатуре кода */
.pin-dots i.opt:not(.on){opacity:.35}.pin .key.ok,.app[data-variant="b"] .pin .key.ok{color:var(--on-accent);background:var(--accent)}

/* «Обновления»: список изменений версии */
.card.news ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px;line-height:1.45}

/* «Карта состояния»: таблица по дням */
.daytable{margin:14px 20px 0}.daytable summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--muted);list-style:none}.daytable summary::after{content:' ▾'}.daytable[open] summary::after{content:' ▴'}
.daytable .card{margin:10px 0 0;padding:6px 14px;max-height:320px;overflow:auto}.daytable table{width:100%;border-collapse:collapse;font-size:13.5px}.daytable th,.daytable td{padding:7px 4px;text-align:left;border-bottom:1px solid var(--line)}.daytable th{font-size:12px;color:var(--muted);font-weight:700}.daytable td+td,.daytable th+th{text-align:right}

/* Готовая смена: поля своей премии видны только у выбранной схемы */
.tb{display:none}form[data-tpl-bonus-now="revenue"] .tb-revenue,form[data-tpl-bonus-now="client"] .tb-client,form[data-tpl-bonus-now="plan"] .tb-plan{display:contents}

/* «Так будет в календаре»: клетка месяца и строка дня */
.pv{display:grid;grid-template-columns:64px 1fr;gap:6px 12px;align-items:center;margin:2px 20px 14px}.pv-t{grid-column:1/-1;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pv-cell{display:grid;gap:3px;padding:6px 5px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}.pv-cell i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}.pv-cell .ev{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pv-line{pointer-events:none;min-height:40px;align-items:center;border-radius:12px}

/* Готовая пара (учёба): ставки, перерыва, доплаты и премии нет; подпись работы над временем готовой смены */
.money-only{display:contents}form[data-job-kind="study"] .money-only,form[data-job-kind="study"] .tb{display:none !important}
.tpl-job{margin:0 0 8px;font-weight:700}

/* С мышью категории и типы дохода стоят списком в несколько строк — без прокрутки вбок; пальцем — одной прокручиваемой строкой */
@media (pointer:fine){.sheet .chips.one-line.pick-list{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0}}

/* «На что рассчитывать»: строки прогноза; уточняющие строки — с отступом и мельче; у расхода в окне регулярной операции есть категория, у дохода — нет */
.forecast .fc-row{min-height:46px}.forecast .fc-row.sub{min-height:38px;padding-left:16px;width:100%}.forecast .fc-row.sub .r-title,.forecast .fc-row.sub .r-val{font-size:13.5px;font-weight:600;color:var(--muted)}
.forecast .fc-row.strong .r-title,.forecast .fc-row.strong .r-val{font-weight:800}.forecast .fc-row.warn .r-val{color:var(--warn)}
form[data-picked-type="income"] .expense-only{display:none}
.r-sub svg.lucide{width:12px;height:12px;vertical-align:-1px;margin-right:3px}

/* Строка-ярлык с выбором файла (банк в окне «Банки») */
label.rowi.as-label{cursor:pointer}

/* Окно друга: работы и учёба, которые он видит */
.job-access{display:grid;gap:8px}.job-access small{font-size:12px;font-weight:700;color:var(--muted)}

/* Шапка «Дел» с четырьмя видами (Список, Матрица, Списки, Покупки): на телефоне переключатель уходит на свою строку и листается, если не помещается */
.app[data-device="phone"] .top.stack .top-actions{flex-wrap:wrap;row-gap:8px;justify-content:flex-start}
.app[data-device="phone"] .top.stack .top-actions .seg{order:9;max-width:100%;overflow-x:auto;scrollbar-width:none}

/* Общие списки дел на главном экране «Дел»: заголовок со значком, своя строка «Что сделать?», сворачиваемое «Сделано» */
.todo-list h2{display:flex;align-items:center;gap:8px}.todo-list h2>svg.lucide{width:17px;height:17px;color:var(--muted)}.todo-list h2 .push{flex:1}
.todo-with{margin:-2px 20px 8px}.quick.sm{margin-top:4px;margin-bottom:8px}
.todo-done{margin:6px 20px 0}.todo-done summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:13px;font-weight:700;color:var(--muted);padding:6px 0}.todo-done .lg{margin-left:0;margin-right:0}

/* Списки подряд: «ручка» в заголовке меняет списки местами; пока тянут — списки свёрнуты до заголовков */
.todo-list h2 .grip{display:grid;place-items:center;width:22px;margin-left:-4px}
.list-blocks.sorting .todo-list>:not(h2){display:none}.list-blocks.sorting .todo-list{padding-bottom:4px}.todo-list.dragging{position:relative;z-index:2;opacity:.9}
.chips.often{margin:8px 20px 0}

/* «Принять» у поля приглашения появляется, только когда в поле что-то вставлено: у пустого поля она непонятна */
.code-row .code-in:placeholder-shown~.btn{display:none}

/* «Регулярные»: у дохода — категория дохода, у расхода — категория трат */
form[data-picked-type="expense"] .income-only{display:none}

/* Предпросмотр привычки в окне: верх карточки с картинкой и строка в списке */
.hpv{display:grid;gap:8px;margin:14px 0 4px}.hpv .pv-t{grid-column:auto}
.hpv-card{position:relative;display:grid;justify-items:center;gap:5px;padding:18px 16px 16px;border-radius:var(--r-lg);overflow:hidden;text-align:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.hpv-card::before{content:'';position:absolute;inset:0 0 auto;height:72%;background:var(--hbg);opacity:.9;-webkit-mask-image:linear-gradient(180deg,#000 38%,#0000);mask-image:linear-gradient(180deg,#000 38%,#0000)}
.hpv-card>*{position:relative}.hpv-card .ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--surface) 88%,transparent)}
.hpv-card .ring>svg.lucide,.hpv-card .ring>.emo{position:relative}.hpv-card .ring svg.lucide{width:26px;height:26px}.hpv-card .ring .emo{font-size:26px}
.hpv-card b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:800}.hpv-card em{font-size:13px;color:var(--muted)}
.hpv-row{pointer-events:none;padding:9px 14px;border:0;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}

/* Денежное поле: знак валюты сразу после числа — приглушённый, не выделяется; ширину поля задаёт невидимое «зеркало» введённого числа */
.f-num{flex:1;min-width:0;display:grid;grid-template-columns:minmax(1ch,auto) max-content;justify-content:start;align-items:baseline;column-gap:5px;overflow:hidden} /* Знак на одной линии с цифрами */
.f-num .f-mirror{grid-area:1/1;visibility:hidden;white-space:pre;font-size:15.5px;font-weight:600;font-family:inherit}
.f-num .f-in{grid-area:1/1;width:0;min-width:100%}
.f-num .cur{grid-area:1/2;font-style:normal;font-size:15.5px;font-weight:600;color:var(--muted);user-select:none;-webkit-user-select:none;pointer-events:none}
.f-num.ph.is-empty .cur{visibility:hidden}
/* Значок смены или события в клетке месяца — размером с текст, не ломает одну строку */
.ev-ic{display:inline-grid;vertical-align:-.12em;margin-right:.3em}.ev-ic svg.lucide{width:1.1em;height:1.1em}.ev-ic .emo{font-size:1em;line-height:1}
/* Готовая пара: поле места называется «Аудитория» */
form[data-job-kind="study"] .work-only,form:not([data-job-kind="study"]) .study-only{display:none}
/* Строка дня и недели: под временем начала — время конца, чуть бледнее */
.blk.rel .wl-t i{display:block;margin-top:1px;font-style:normal;font-weight:500;font-size:.92em;opacity:.8}
/* Кружок человека с фото из Telegram */
.ava.ph{background:var(--line);overflow:hidden}.ava.ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Место для кнопки «Войти через Google» — её рисует сам Google; подпись про Telegram — мелко под ней */
.gsi-slot{display:flex;justify-content:center;min-height:44px;margin:10px 0 2px}.gsi-slot>.btn{width:100%}
.gsi-note{margin:6px 6px 0;font-size:12.5px;line-height:1.35;color:var(--muted);text-align:center}
/* На странице «Аккаунт» кнопка Google стоит с теми же полями, что и списки над ней */
.scroll .gsi-slot{margin:12px 20px 2px}.scroll .gsi-note{margin:6px 24px 0}
/* Подсказка «Нажмите на карандаш…» — прямо над карандашом (правило здесь, а не в base.css: extra.css грузится позже) */
.coach{bottom:calc(var(--zone) + 64px);right:16px}
/* Подсказка «поставьте первую смену» указывает на карандаш: на телефоне стрелка справа смотрит вниз, прямо на круглый карандаш;
   на компьютере — облачко прямо под кнопкой «Разметить», стрелка вверх на неё (привязано к кнопке, не съезжает при другой ширине окна) */
.coach svg.lucide{flex:none;width:18px;height:18px}
.coach-at{position:relative;display:inline-flex}
.app[data-device="desktop"] .coach.coach-desk{position:absolute;top:calc(100% + 10px);right:0;left:auto;bottom:auto;transform:none;width:max-content;max-width:250px;white-space:normal}
@container (max-width:640px){.app[data-device="desktop"] .coach-desk{display:none !important}}
/* Правая панель на компьютере: под списками дня и дел — отступ, чтобы следующая карточка («Привычки», «Как вы сейчас?») не наезжала на последнюю строку */
.panel .wk-list{margin-bottom:16px}.panel .lg{margin:0 0 16px}
/* Препарат: дни недели видны, только когда выбрано «По дням» */
.med-wd{margin:10px 0 0}form[data-form="med"]:not([data-repeat="weekdays"]) .med-wd{display:none}
/* Отчёт о самочувствии: числа сводки, календарь настроения, таблица по дням */
.hstats.rep-stats{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}.hstats.rep-stats b{display:block;font-size:17px;white-space:nowrap}.rep-num{display:flex !important;align-items:center;justify-content:center;gap:6px}
.rep-cals{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.rep-cal h3{margin:0 0 8px;font-size:14px}
.rc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.rc-head{margin-bottom:3px}.rc-head span{font-size:10px;font-weight:700;color:var(--muted);text-align:center;text-transform:uppercase}
/* Числа дней в календаре отчета читаются и на экране, и на листе: дни периода — тёмные на цветной клетке, дни вне периода —
   приглушённые, на пустой клетке (не прозрачные: иначе на бумаге число почти не видно) */
.rc-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:8px;background:color-mix(in srgb,var(--line) 70%,transparent)}.rc-cell em{position:absolute;top:1px;left:4px;font-style:normal;font-size:9px;color:var(--text)}.rc-cell.out{background:none}.rc-cell.out em{color:var(--muted)}.rc-cell svg{width:68%;height:68%}
.rc-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 2px 0;font-size:12px;color:var(--muted)}.rc-legend span{display:inline-flex;align-items:center;gap:5px}
.rep-table{width:100%;border-collapse:collapse;font-size:12.5px}.rep-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px;border-bottom:1px solid var(--line)}
.rep-table td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}.rep-table .rt-date b{display:block;white-space:nowrap}.rep-table .rt-date small{color:var(--muted)}.rep-table .rt-mood{white-space:nowrap}.rep-table .rt-mood svg{vertical-align:-4px;margin-right:4px}.rep-table .rt-note{color:var(--muted)}
.rep-note{margin-top:12px}
@media print{.rep-table tr,.rep-cal{break-inside:avoid}} /* Размер букв в таблице не уменьшаем: пусть будет больше листов, но читаемо */
/* Компьютер: у строки готовых смен в окне видна тонкая полоса прокрутки — понятно, что её можно пролистать (и колесом мыши) */
.app[data-device="desktop"] .chips.one-line{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 55%,transparent) transparent}
/* «Напоминания»: поле «Через» спрятано при «не напоминать» — у поля над ним нет нижней линии */
.fld:has(+ .fld[hidden]:last-child){border-bottom:0}
/* Отчёт: на узком экране таблица по дням листается вбок сама, страница не уезжает; при печати — целиком */
.rep-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media print{.rep-tbl{overflow:visible}}
/* Отчёт: заголовки, цифры, календарь, таблица и пояснение стоят вровень с карточками, а не у края экрана — с отступом карточек
   своего стиля (20 px в «Воздухе», 14 px в «Мягком»), и на телефоне, и на компьютере */
.report .rep-page>:not(.card):not(.lg):not(.rep-two),.report .rep-two>*>.rep-t{margin-left:20px;margin-right:20px}
.app[data-variant="b"] .report .rep-page>:not(.card):not(.lg):not(.rep-two),.app[data-variant="b"] .report .rep-two>*>.rep-t{margin-left:14px;margin-right:14px}
/* Отчёт — одним шрифтом Inter (он лежит в приложении и вшивается в страницу отчета из Telegram) и на экране, и на листе, в любом стиле.
   Так шрифт уже загружен к печати: иначе часть букв на листе вышла бы другим, запасным шрифтом */
.report{font-family:'Inter',system-ui,sans-serif}
/* Месяцы «Календаря настроения» — карточки внутри своей сетки: отступ у сетки, у самих карточек его нет (иначе он двойной) */
.app .report .rep-cals>.card{margin:0}
/* Отчёт: подробный журнал — каждая запись со всеми полями и подписями; запись не разрывается между страницами, день — может */
.rep-day.rep-full{break-inside:auto}
.rep-log{display:flex;flex-direction:column;gap:8px;min-width:0}
.rep-e{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);break-inside:avoid}
.rep-e-t{padding-top:2px;font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rep-e-b{min-width:0}
.rep-e-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.rep-e-h svg{flex:none}
.rep-e-x{margin:6px 0 0;font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.rep-e-f{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;margin:6px 0 0;font-size:13px;line-height:1.4}
.rep-e-f dt{color:var(--muted)}
.rep-e-f dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.rep-med{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.rep-med:last-child{border-bottom:0}
.rep-med small{color:var(--muted)}
@media print{.rep-e{box-shadow:none;border:1px solid #ddd}}
/* Бабочки настроения — готовые рисунки владельца. Значок нарезан на три полосы одной картинки:
   левое крыло, середина с телом, правое крыло. Так крылья складываются к телу при наведении мышкой,
   при нажатии и в полёте, а сам рисунок не искажается. */
.bfly{position:relative;display:inline-block;flex:none;line-height:0}
.bfly i{position:absolute;top:0;bottom:0;display:block;overflow:hidden;margin:0;padding:0;border:0;min-width:0;max-width:none;background:none}
.bfly i b{position:absolute;top:0;height:100%;display:block;margin:0;padding:0;border:0;border-radius:0;min-width:0;max-width:none;font:inherit;background:var(--bf) 0 0/100% 100% no-repeat}
.bfly .bf-l{left:0;width:38%}
.bfly .bf-l b{left:0;width:263.16%;transform-origin:38% 50%}
.bfly .bf-c{left:38%;width:24%}
.bfly .bf-c b{left:-158.33%;width:416.67%}
.bfly .bf-r{left:62%;width:38%}
.bfly .bf-r b{left:-163.16%;width:263.16%;transform-origin:62% 50%}
.bf-m1{--bf:url(../img/bf-1.webp)}.bf-m2{--bf:url(../img/bf-2.webp)}.bf-m3{--bf:url(../img/bf-3.webp)}.bf-m4{--bf:url(../img/bf-4.webp)}.bf-m5{--bf:url(../img/bf-5.webp)}
@keyframes bf-flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.44)}}
.bfly:hover .bf-l b,.bfly:hover .bf-r b,.bfly.bf-go .bf-l b,.bfly.bf-go .bf-r b{animation:bf-flap var(--flap,.52s) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.bfly .bf-l b,.bfly .bf-r b{animation:none !important}}
/* Выбор значков настроения в «Оформлении»: карточка с пятью значками */
.mi-card .mi-row{display:flex;justify-content:center;gap:6px;padding:10px 0 2px}
/* На телефоне 360–390 px пять значков по 30 px в карточку не помещаются, и карточка «Бабочки» вылезла бы за край экрана.
   Поэтому карточки делят ширину поровну, а значки уменьшаются вместе с карточкой (не больше 30 px) */
.styles:has(>.mi-card){grid-template-columns:repeat(2,minmax(0,1fr))}
.mi-card .mi-row{gap:3%}.mi-card .mi-row>.face{width:min(30px,17.4%) !important;height:auto !important;aspect-ratio:1}
/* Пролёт бабочки: поверх приложения и нижней панели, но под окнами; нажатиям не мешает */
.bf-fly{position:fixed;left:0;top:0;z-index:24;pointer-events:none;will-change:transform;transform-origin:50% 50%}
@keyframes bf-rest{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.74)}}
.bfly.bf-rest .bf-l b,.bfly.bf-rest .bf-r b{animation:bf-rest calc(var(--flap,.52s) * 7) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.bf-fly{display:none}}
/* Во время перехода бабочку прячем мгновенно (без перехода): экран снимается «фотографией», и иначе бабочка двоится.
   Переход кончился — она так же мягко возвращается. Уходит совсем только через .bf-out, и тогда остаётся прозрачной. */
html[data-motion] .bf-fly{opacity:0;transition:none}
.bf-fly{transition:opacity .6s ease} /* Бабочка нигде не пропадает рывком: и уход, и возвращение — плавные */
.bf-fly.bf-out{opacity:0}
/* Блёстки за летящей бабочкой: маленькие искорки, гаснут сами и ничему не мешают */
.bf-dust{position:fixed;left:0;top:0;z-index:23;width:9px;height:9px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0%,rgba(255,240,205,.9) 38%,rgba(255,226,170,.45) 60%,rgba(255,226,170,0) 78%);animation:bf-dust 1.25s ease-out forwards}
@keyframes bf-dust{0%{opacity:1;transform:translate(var(--x),var(--y)) scale(var(--s))}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(calc(var(--s) * .35))}}
@media (prefers-reduced-motion:reduce){.bf-dust{display:none}}
/* Бабочка настроения в углу аватарки: сам кружок не трогаем, бабочка сидит поверх него */
.avabox{position:relative;display:inline-flex;flex:none;line-height:0}
.ava-bf{position:absolute;right:-5px;bottom:-4px;pointer-events:none;line-height:0;filter:drop-shadow(0 0 2px var(--surface)) drop-shadow(0 0 2px var(--surface))}
.profile .ava-bf{right:-6px;bottom:-5px}
/* Отметке настроения больше двух дней — значок бледнее; сегодняшний в окне друга появляется коротко и мягко. Под строкой — «сегодня / вчера / 3 дня назад» */
.ava-bf.old{opacity:.45;filter:grayscale(.35) drop-shadow(0 0 2px var(--surface)) drop-shadow(0 0 2px var(--surface))}
@keyframes badge-in{from{opacity:0;transform:scale(.4)}}
.ava-bf.fresh{animation:badge-in .45s var(--spring) .12s both}
.profile .r-sub.mood-when{display:block;margin-top:2px}
/* Карточка «Что-то пошло не так» (app/js/guard.js) — поверх всего приложения; цвета с запасом, если тема ещё не выставлена */
.crash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;background:var(--bg,#fff);color:var(--text,#14161a)}
.crash-card{width:100%;max-width:420px;margin:auto;padding:22px 18px;border-radius:22px;background:var(--surface,#fff);border:1px solid var(--line,#eceef2)}
.crash-card h2{margin:0 0 8px;font-size:20px;font-weight:800}
.crash-text{margin:0 0 16px;font-size:14.5px;line-height:1.5;color:var(--muted,#7c828e)}
.crash-card .btn-block+.btn-block,.crash-card .note+.btn-block{margin-top:10px}
.crash-card .btn[disabled]{opacity:.55}
.crash-status{color:var(--text,#14161a);font-weight:600}
.crash-what{margin-top:14px;font-size:13px;color:var(--muted,#7c828e)}
.crash-what summary{cursor:pointer}
.crash-what pre{margin:8px 0 0;padding:10px;max-height:220px;overflow:auto;border-radius:12px;background:var(--surface-2,#f4f5f8);color:var(--text,#14161a);white-space:pre-wrap;word-break:break-word;font-size:12px;user-select:text}
/* «Сегодня» на телефоне — маленькая кнопка у названия месяца (у недели и дня — в строке под заголовком). Не теснит название:
   если рядом не помещается, встаёт строкой ниже. Место для пальца больше самой кнопки */
.cal-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.today-pill{position:relative;flex:none;display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;color:var(--accent-ink);background:var(--accent-soft)}
.today-pill::after{content:'';position:absolute;inset:-9px -4px}
.top .sub .today-pill{height:24px;margin-left:8px;vertical-align:1px}
/* «По часам» на телефоне: название дня того же размера, что и название месяца, — «Понедельник» не рвётся на «Понедельни / к» */
.app[data-device="phone"] .day-top h1{font-size:clamp(21px,7.2vw,var(--h1))}
/* ...а размер названия дня и месяца — по месту, которое осталось рядом с кнопками (cqi — доля ширины блока с названием). В Telegram
   в шапке ещё кнопка «Во весь экран», а кнопки-значки не сжимаются, поэтому без подгонки по месту на 375 px «Понедельник» рвался бы посреди слова,
   а на 360 px «September 2026 ⌄» заезжал бы под лупу. Самое длинное название дня — около 6,9 размера шрифта («Понедельник»
   в «Мягком»), месяца — 7,5 и ещё ~25 px на стрелку («September 2026»); где места хватает, размер 7,2vw. Старый браузер
   без запросов к контейнеру строку с cqi пропускает — действует правило выше */
.app[data-device="phone"] .day-top>div:first-child{flex:1;min-width:0;container-type:inline-size}
.app[data-device="phone"] .day-top h1{font-size:clamp(15px,min(7.2vw,14cqi),var(--h1))}
.app[data-device="phone"] .cal-top .cal-title{flex:1;container-type:inline-size}
.app[data-device="phone"] .cal-top h1{font-size:clamp(15px,min(7.2vw,11.5cqi),var(--h1))}
/* В окне выбора месяца сегодняшний месяц обведён, даже когда выбран другой. Свой класс mon-now: now занят карточкой «Сейчас» (core.css) */
.mon.mon-now:not(.on){box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent-ink)}
.mon.mon-now:not(.on) small{color:inherit}
/* Праздник — точка у числа (видна всегда) и подпись после записей, если в клетке осталось место; «праздник», а не «выходной» */
.cell,.wk-date,.ym-grid i{--hol-ink:color-mix(in srgb,var(--c-habit) 58%,var(--text))}
.cell.is-hol .num{position:relative}
.cell.is-hol .num::after{content:'';position:absolute;top:0;right:-2px;width:6px;height:6px;border-radius:50%;background:var(--c-habit)}
.month .hol{display:block;flex:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9.5px;line-height:1.3;font-weight:600;padding:1.5px 4px;color:var(--hol-ink)}
@container (min-width:62px){.month .hol{font-size:10.5px;padding:2px 5px}}
@container (min-width:78px){.month .hol{font-size:11px;padding:2px 7px}}
.app[data-device="desktop"] .month .hol{font-size:11.5px;padding:2px 8px}
.ym-grid i.hol{text-decoration:underline 2px var(--c-habit);text-underline-offset:2px}
.wk-date.is-hol b{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c-habit) 60%,transparent)}
.wk-hol{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--hol-ink,var(--muted))}
.wk-list .wk-hol{--hol-ink:color-mix(in srgb,var(--c-habit) 58%,var(--text))}
.wk-hol svg.lucide{width:15px;height:15px;color:var(--c-habit)}
.hol-blk .wl-t{color:var(--c-habit);opacity:1}
.sub-hol{color:color-mix(in srgb,var(--c-habit) 58%,var(--text));font-weight:600}
/* Окно сегодняшнего дня на телефоне — те же блоки, что справа на компьютере */
.app .day-sheet .card{margin:14px 0 0;padding:14px}
.habits-mini{flex-wrap:wrap;justify-content:center;row-gap:12px}
.habit-mini{flex:0 1 calc(25% - 8px)}
.app button.card.to-buy{display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:inherit;font:inherit}
.today-meds .med-row{flex-wrap:wrap;row-gap:10px;padding:12px 0}
.today-meds .med-row .r-main{flex:1 1 calc(100% - 64px)}
.today-meds .med-row .btn.sm{flex:1;justify-content:center}
/* Что быстрая строка поняла из «завтра в 15» (core/quick-when.js) — пометка над строкой, снимается крестиком */
.quick-when{margin:0 20px 6px}
.quick-when:empty{display:none}
.qw-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:32px;padding:0 2px 0 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:700}
.qw-chip>svg.lucide{flex:none;width:15px;height:15px}
.qw-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qw-x{position:relative;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:inherit;cursor:pointer}
.qw-x::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.qw-x svg.lucide{width:14px;height:14px}
/* Шаги в деле — «2 из 5» в строке и список с галочками в окне дела */
.t-steps{display:inline-flex;align-items:center;gap:4px}
.t-steps svg.lucide{width:13px;height:13px}
.task-steps{margin:2px 0 12px}
.tstep{display:flex;align-items:center;gap:12px;min-height:46px;border-bottom:1px solid var(--line)}
.step-in{flex:1;min-width:0;border:0;outline:0;background:none;padding:10px 0;font:inherit;font-size:16px;color:var(--text)}
.tstep.done .step-in{text-decoration:line-through;color:var(--muted)}
.step-add{display:flex;align-items:center;gap:12px;min-height:46px;color:var(--muted);cursor:text}
.step-add>svg.lucide{flex:none;width:22px;height:18px}
.step-add input{flex:1;min-width:0;border:0;outline:0;background:none;padding:10px 0;font:inherit;font-size:16px;color:var(--text)}
.step-add input::placeholder{color:var(--muted)}
/* Домашнее задание в «Делах» — подпись занятия со значком книги */
.hw-task .t-with svg.lucide{width:13px;height:13px}
/* Переключатель языка на первом экране приветствия */
.ob-lang{margin-top:2px}.ob-lang button{height:40px;padding:0 18px;font-size:14px}
/* Подсказки к жестам — того же вида, что подсказка про карандаш. Нажатия проходят сквозь плашку к строке или кнопке под ней;
   при первом касании она гаснет. На экране — внизу слева, над панелью вкладок (справа остаётся место круглому карандашу);
   в окне — сразу под «ручкой», в общем потоке, ничего не закрывает */
.coach.tip{left:16px;right:auto;bottom:calc(var(--zone) + 12px);max-width:min(330px,calc(100% - 92px));pointer-events:none;animation:tip-in .32s var(--ease)}
.sheet .coach.tip{position:static;width:max-content;max-width:100%;margin:0 auto 12px;padding:8px 13px;font-size:13px;box-shadow:none}
.coach.tip-out{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
@keyframes tip-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.app[data-calm="on"] .coach.tip{animation:none}

/* Карандаш правки карточки человека — сразу после имени в заголовке */
.top h1 .h1-edit{display:inline-flex;vertical-align:middle;margin:-4px 0 0 6px;color:var(--muted)}

/* Плашка «Переезжаем» (screens/moved.js, movingHtml): пока прежние адрес и бот работают, — сверху основных экранов. Лежит в общем
   потоке над экраном, окна ложатся поверх неё; на печать не идёт. На компьютере — одной строкой; на телефоне (и в узкой середине
   компьютера — ниже) текст идёт во всю ширину (без значка, ✕ — в углу), а кнопка — под ним: так слова не жмутся в узкий столбик */
.movebar{flex:none;padding:10px 12px 0}
.app[data-device="desktop"] .movebar{padding:16px 28px 0}
.mb-card{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:var(--r);background:var(--accent-soft);color:var(--text)}
.mb-card>svg.lucide{flex:none;width:20px;height:20px;color:var(--accent-ink)}
.mb-text{flex:1;min-width:0;font-size:13.5px;line-height:1.35;overflow-wrap:break-word}
.mb-go{flex:none;height:40px;padding:0 16px;font-size:13.5px}
.mb-go svg.lucide{width:17px;height:17px}
.mb-x{color:var(--muted)}
.mb-x svg.lucide{width:18px;height:18px}
.app[data-device="phone"] .mb-card{position:relative;display:block;padding:9px 40px 10px 14px}
.app[data-device="phone"] .mb-card>svg.lucide{display:none}
.app[data-device="phone"] .mb-text{line-height:1.3}
.app[data-device="phone"] .mb-x{position:absolute;top:1px;right:0}
.app[data-device="phone"] .mb-go{position:relative;display:flex;width:max-content;max-width:100%;margin-top:7px;height:34px;padding:0 14px;font-size:13px}
.app[data-device="phone"] .mb-go::before{content:'';position:absolute;inset:-4px 0}
/* На компьютере середина между боковой и правой панелями бывает уже телефона (окно 900–1140 точек на экранах с правой панелью:
   календарь, «Задачи», день): одной строкой кнопка и ✕ ужали бы текст до столбика в букву. Там плашка такая же, как на телефоне;
   шире — одной строкой, и текст в ней не длиннее двух строк. Ширину даёт .main (она container) */
@container (max-width:600px){
  .app[data-device="desktop"] .mb-card{position:relative;display:block;padding:9px 40px 10px 14px}
  .app[data-device="desktop"] .mb-card>svg.lucide{display:none}
  .app[data-device="desktop"] .mb-text{line-height:1.3}
  .app[data-device="desktop"] .mb-x{position:absolute;top:1px;right:0}
  .app[data-device="desktop"] .mb-go{position:relative;display:flex;width:max-content;max-width:100%;margin-top:7px;height:34px;padding:0 14px;font-size:13px}
  .app[data-device="desktop"] .mb-go::before{content:'';position:absolute;inset:-4px 0}
}
/* Предупреждение внизу после нажатия на кнопку плашки при неотправленных правках (app.js, toast с wide): длиннее обычного
   сообщения — оно шире и видно целиком, без обрезки на третьей строке */
.toast.wide{width:max-content;display:block}
/* Полноэкранный Telegram: место под его кнопками сверху берёт плашка, а экран под ней начинается без этого отступа */
html.tg-fullscreen .movebar{padding-top:calc(10px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))}
.app[data-moving="on"] #screen{--tg-safe-area-inset-top:0px;--tg-content-safe-area-inset-top:0px}
/* «Нет сети» на телефоне не ложится на плашку: при ней — внизу, над панелью вкладок */
.app[data-moving="on"][data-device="phone"] .netpill{top:auto;bottom:calc(var(--zone) + 14px)}
/* Общее учебное место (js/screens/study-places.js): строка «Общая пара · место» в окне пары, «Открыть лекцию», выбор места, значки
   в списках. Блок места на экране работы прячется, пока в переключателе выбрана «Работа» */
.sheet .place-line{display:flex;align-items:center;gap:6px;min-width:0;margin:12px 0 2px;font-size:13px;font-weight:600;color:var(--muted)}
.place-line svg.lucide{flex:none;width:15px;height:15px;color:var(--accent-ink)}
.place-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lecture-btn{margin-top:10px}
.place-pick .f-v.chips .chip svg.lucide{width:14px;height:14px}
/* Выбор места у новой пары: чипы — от левого края колонки и не шире её. Длинное название обрезается с конца, а точка цвета и значок
   общего места видны всегда (прижатый вправо чип шире колонки уезжал влево и терял начало) */
.place-pick .f-v.chips{justify-content:flex-start}
.place-pick .f-v.chips .chip{max-width:100%;min-width:0}
.place-pick .chip .dot,.place-pick .chip svg.lucide{flex:none}
.place-pick .chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Вопрос с длинным ответом: кнопки делят ширину окна, длинная подпись переносится, а не вылезает за край (как .wz-make в more.css) */
.sheet.alert .two-btn .btn{min-width:0;height:auto;min-height:50px;padding-top:6px;padding-bottom:6px;white-space:normal;line-height:1.2;text-align:center}
/* Месяц на компьютере: значок общего места или лекции в клетке — только когда клетка широкая (окно от 1600 px), иначе он съедает
   название. Общее место видно и в дне, неделе, окне пары */
@media (max-width:1599px){.cell .ev .cm{display:none}}
/* Заголовок готовых пар места: значок общего места и название — одним элементом, как у остальных заголовков */
.st-name{min-width:0}
.pl-ic{display:inline-grid;vertical-align:-2px;margin-right:3px}.pl-ic svg.lucide{width:13px;height:13px}
.st .pl-ic{margin-right:6px}.st .pl-ic svg.lucide{width:14px;height:14px}
.wl-sub .cm{display:inline-grid;vertical-align:-2px;margin-left:6px;opacity:.75}.wl-sub .cm svg.lucide{width:13px;height:13px}
/* Неделя на телефоне: значкам после названия пары места не хватает — строка кончалась бы «…», будто название обрезано.
   Общее место там видно в окне дня и в окне пары */
@media (max-width:520px){.blk b>.cm{display:none}}
.place-sec .r-sub{white-space:normal}
form[data-picked-kind="work"] .place-sec{display:none}
/* Списки на экране работы — с теми же отступами от края, что и поля над ними (в «Воздухе» строки упирались в край экрана;
   в «Мягком» у списков свои карточки — их правило сильнее) */
form[data-form="jobfull"] .lg{margin:0 20px 4px}