/* ═══════════════════════════════════════════════════════════════
   NASKORO B — общий стиль
   Источник значений: mockups/dashboard-B-techno.html (эталон, 22.07.2026)
   и design-system/naskoro-b-techno/MASTER.md

   Правило: сюда попадает только проверенное на живых макетах.
   Экранные особенности остаются в самих файлах.
   ═══════════════════════════════════════════════════════════════ */

/* ── ШРИФТЫ ────────────────────────────────────────────────── */
@font-face{font-family:'Halvar';src:url('fonts/HalvarBreit-Rg.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Halvar';src:url('fonts/HalvarBreit-Md.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Halvar';src:url('fonts/HalvarBreit-Bd.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'HalvarEng';src:url('fonts/HalvarEng-Bd.ttf') format('truetype');font-weight:700;font-display:swap}
/* Nunito подключён РАДИ ОДНОГО ГЛИФА — знака донга ₫ (U+20AB).
   В макетах не используется (валюта пишется словом VND), механизм оставлен. */
@font-face{font-family:'Dong';src:url('fonts/Nunito-SemiBold.ttf') format('truetype');
  unicode-range:U+20AB;font-display:swap}

/* ── ПЕРЕХОД МЕЖДУ РАЗДЕЛАМИ ────────────────────
   Разделы — отдельные страницы, поэтому каждый переход давал
   белую вспышку перезагрузки. Где браузер умеет — показывает
   перетекание, где не умеет — всё как было, ломаться нечему. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtout 110ms cubic-bezier(0.23,1,0.32,1) both}
::view-transition-new(root){animation:vtin 200ms cubic-bezier(0.23,1,0.32,1) both}
@keyframes vtout{to{opacity:0}}
@keyframes vtin{from{opacity:0}}

/* ── ТОКЕНЫ ────────────────────────────────────────────────── */
:root{
  --bg:#EBF1E5;          /* фон приложения */
  --surf:#F1F6EC;        /* карточка, чуть светлее фона */
  --ink:#0E120B;         /* чернила: текст и единственный акцент */
  --mut:#686F60;         /* вторичный текст */
  --br:#868C7F;          /* обводка */
  --br2:#6E7568;         /* активная обводка, органы управления */

  --disp:'Halvar','Dong',system-ui,'Apple Color Emoji','Noto Color Emoji','Segoe UI Emoji',sans-serif;
  --micro:'HalvarEng','Halvar','Dong',system-ui,sans-serif;
  --body:'Inter','Dong',system-ui,'Apple Color Emoji','Noto Color Emoji','Segoe UI Emoji',sans-serif;

  --out:cubic-bezier(0.23,1,0.32,1);
  --inout:cubic-bezier(0.77,0,0.175,1);

  /* ШКАЛА ДВИЖЕНИЯ — одна на все экраны.
     До этого на одно и то же действие было семь разных чисел
     (140/160/170/180/200/220/240) и восемь величин нажатия. */
  --t1:120ms;   /* нажатие, мгновенный отклик */
  --t2:160ms;   /* ховер, цвет, обводка, мелкие поповеры */
  --t3:220ms;   /* выпадашки, раскрытия, уход оверлея */
  --t4:280ms;   /* листы, окна, меню — потолок бюджета UI */

  --p1:.99;     /* нажатие: строка во всю ширину */
  --p2:.97;     /* нажатие: кнопка, чип, карточка, плитка */
  --p3:.94;     /* нажатие: мелкая круглая кнопка */

  --r:16px;      /* ЕДИНЫЙ радиус поверхностей */
  --rc:6px;      /* органы управления */
  --bw:2px;      /* толщина обводки, везде одна */

  color-scheme:light;
}

/* ── ЦВЕТА КАТЕГОРИЙ ────────────────────────────────────────
   Цвет закреплён за КАТЕГОРИЕЙ, а не за местом в рейтинге.
   Пара на каждую: --c-* текст и насыщенная заливка выбранного,
   --cb-* мягкая подложка невыбранного чипа.
   Подобраны программно: контраст текста к своей подложке ≥ 4.6:1,
   светлого текста к заливке ≥ 5.5:1. Не править на глаз. */
:root{
  /* расход */
  --c-day:#426580;    --cb-day:#d6e1dd;      /* Ежедневные траты */
  --c-yum:#89552c;    --cb-yum:#e7e1d0;      /* Вкусняшки */
  --c-cig:#904d5d;    --cb-cig:#e7ded8;      /* Сигареты */
  --c-kofe:#785a3b;   --cb-kofe:#e1e0d1;     /* Кофе */
  --c-eda:#4a6833;    --cb-eda:#d8e1cf;      /* Продукты */
  --c-rest:#8b5239;   --cb-rest:#e6dfd2;     /* Рестораны */
  --c-gas:#68598d;    --cb-gas:#dee0e1;      /* Бензин */
  --c-unexp:#885145;  --cb-unexp:#e3ddd3;    /* Непредвиденное */
  --c-sport:#3d6d42;  --cb-sport:#d7e5d4;    /* Спорт */
  --c-shop:#78518b;   --cb-shop:#e1dee1;     /* Онлайн шопинг */
  --c-gift:#924876;   --cb-gift:#e9dedf;     /* Подарки */
  --c-clean:#466676;  --cb-clean:#d9e5e0;    /* Клининг */
  --c-fun:#8c542b;    --cb-fun:#e9e1d0;      /* Развлечения */
  --c-health:#8a4f68; --cb-health:#e5dedb;   /* Здоровье */
  --c-work:#5c663e;   --cb-work:#dce2d2;     /* Мастерская */
  --c-conn:#41676e;   --cb-conn:#d7e3dc;     /* Мобильная связь */
  --c-hair:#7b5574;   --cb-hair:#e2dfdd;     /* Стрижка */
  --c-rent:#546544;   --cb-rent:#d9e0d2;     /* Аренда */
  --c-ready:#5d662e;  --cb-ready:#dfe5d0;    /* Еда готовая */
  --c-trip:#316788;   --cb-trip:#d4e3e1;     /* Путешествия */
  --c-bike:#276978;   --cb-bike:#d2e3dd;     /* Байк */
  --c-claude:#6f5789; --cb-claude:#e1e0e2;   /* Claude */
  --c-other:#5d6446;  --cb-other:#dee4d5;    /* Другое */
  /* доход — все зелёные, отличаются оттенком */
  --c-gig:#376b2e;    --cb-gig:#d5e2cf;      /* Гиги */
  --c-job:#3d6d37;    --cb-job:#d7e5d1;      /* Работа */
  --c-proj:#4b6831;   --cb-proj:#d9e3d0;     /* Проекты */
  --c-misc:#4f6a43;   --cb-misc:#dce6d5;     /* Прочее */
}

/* Списки задач берут цвета оттуда же, где живут смежные сущности:
   AMP такой же оранжевый, как календарь AMP, Музыка — зелёная, как Groove.
   Одна сущность — один цвет во всём приложении. */
:root{
  --c-inbox:#426580;  --cb-inbox:#d6e1dd;    /* Входящие */
  --c-own:#7b5574;    --cb-own:#e2dfdd;      /* Личное */
  --c-shop2:#466676;  --cb-shop2:#d9e5e0;    /* Покупки */
  /* нейтральный: событие без своего календаря — например, куда пригласили */
  --c-none:#5a6154;   --cb-none:#e2e6db;
}

/* ── ПРОКРУТКА БЕЗ ПОЛОСЫ ───────────────────────────────────
   Системный скроллбар съедает 15px справа, и экран со скроллом
   оказывается уже экрана без него — чат-док «разной ширины».
   Полосу прячем везде, прокрутка остаётся. */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
*{scrollbar-width:none}
*::-webkit-scrollbar{width:0;height:0;display:none}

/* ── БАЗА ──────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
/* ссылок как «гиперссылок» в приложении нет: цвет и подчёркивание задаёт компонент */
a{color:inherit;text-decoration:none}
/* hidden обязан побеждать display у компонентов, иначе скрытые блоки видны */
[hidden]{display:none!important}
/* В макетах ничего не выделяется (кроме полей ввода) — держим палец,
   листаем, елозим по палитре без синей подсветки текста. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}
h1,h2,h3{font-weight:inherit;font-size:inherit;text-wrap:balance}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--rc)}

/* ── ТИПОГРАФИКА ───────────────────────────────────────────── */
.n{font-family:var(--disp);font-weight:700;font-variant-numeric:tabular-nums}
.k{font-family:var(--micro);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  color:var(--mut);text-transform:uppercase;margin-right:-.1em}

/* трекинг по кеглю: крупное сжимаем, мелкое оставляем */
.big,.v,.wordmark,.pill .big,.tot .v{letter-spacing:-0.022em}
.q .lbl,.ev .nm,.tk .x,.li .nm{letter-spacing:0}

/* ── ПОВЕРХНОСТИ ───────────────────────────────────────────── */
.card{border:var(--bw) solid var(--br);border-radius:var(--r);background:var(--surf);padding:16px;
  transition:border-color var(--t2) var(--out)}
@media(hover:hover) and (pointer:fine){.card:hover{border-color:var(--br2)}}
.card+.card{margin-top:10px}
.thead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.go{color:var(--mut);font-size:16px;transition:transform var(--t2) var(--out)}
@media(hover:hover) and (pointer:fine){.card:hover .go{transform:translateX(4px)}}

/* ── ШКАЛА ─────────────────────────────────────────────────── */
.gauge{display:flex;align-items:center;gap:11px;margin-top:12px}
.bar{flex:1;height:12px;background:var(--br);border-radius:var(--rc);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:var(--rc);
  transform-origin:left;animation:fill .7s var(--out) .18s both}
@keyframes fill{from{transform:scaleX(0)}}
.pct{font-family:var(--disp);font-weight:700;font-size:13px;flex:none}

/* ── ПОЯВЛЕНИЕ ─────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.st{opacity:0;animation:rise .42s var(--out) forwards}
.st:nth-of-type(1){animation-delay:.04s}.st:nth-of-type(2){animation-delay:.10s}
.st:nth-of-type(3){animation-delay:.16s}.st:nth-of-type(4){animation-delay:.22s}
.st:nth-of-type(5){animation-delay:.28s}.st:nth-of-type(6){animation-delay:.34s}

/* ── КНОПКИ И ЧИПЫ ─────────────────────────────────────────── */
/* Текст в кнопках и чипах — ВСЕГДА по центру (правило Никиты, 23.07.2026) */
.btn{display:block;width:100%;padding:14px;border:var(--bw) solid var(--br2);border-radius:999px;
  background:transparent;text-align:center;font-size:14px;
  transition:transform var(--t2) var(--out),background var(--t2) var(--out),border-color var(--t2) var(--out)}
.btn:active{transform:scale(var(--p2));transition-duration:var(--t1)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(hover:hover) and (pointer:fine){.btn:hover{border-color:var(--ink)}}

.pil{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;border:var(--bw) solid var(--br);border-radius:999px;background:var(--surf);
  font-size:13px;text-align:center;line-height:1.2;
  transition:border-color var(--t2) var(--out),background var(--t2) var(--out),transform var(--t1) var(--out)}
.pil:active{transform:scale(var(--p2));transition-duration:var(--t1)}
.pil.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(hover:hover) and (pointer:fine){.pil:hover{border-color:var(--br2)}}

/* чип категории: мягкая заливка своим цветом, цветной текст, без обводки.
   Референс — «чипсы вариант 1». Выбранный заливается насыщенно. */
.cpil{display:inline-flex;align-items:center;justify-content:center;
  padding:10px 15px;border:0;border-radius:13px;
  background:var(--cb,#e2e6dc);color:var(--c,var(--ink));
  font-size:13px;line-height:1.2;text-align:center;white-space:nowrap;
  transition:transform var(--t1) var(--out),filter var(--t2) var(--out)}
.cpil:active{transform:scale(var(--p2));transition-duration:var(--t1)}
.cpil.on{background:var(--c,var(--ink));color:var(--surf)}
@media(hover:hover) and (pointer:fine){.cpil:hover{filter:brightness(.97)}}

/* ── ТАББАР ────────────────────────────────────────────────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(66px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:rgba(235,241,229,.94);
  backdrop-filter:blur(14px);border-top:var(--bw) solid var(--br);display:flex;align-items:center;z-index:20}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mut);
  transition:color var(--t2) var(--out),transform var(--t2) var(--out)}
.tab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.tab .k{font-size:8px}
.tab.on,.tab.on .k{color:var(--ink)}
.tab:active{transform:scale(var(--p3))}
.plus{width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center;
  flex:none;margin:0 6px;touch-action:none;transition:transform var(--t2) var(--out)}
.plus:active{transform:scale(var(--p3))}
.plus svg{width:20px;height:20px;stroke:var(--bg);stroke-width:2.4}

/* Таббар: на телефоне пять кнопок — Главная · Чат · + · Настройки · Ещё.
   На десктопе от него остаётся только «+»: чат и так висит доком справа,
   настройки и разделы открываются меню, возврат на главную — по NASKORO в шапке. */
.tabbar{display:grid;grid-template-columns:repeat(2,1fr) auto repeat(2,1fr);
  align-items:center;padding-inline:8px}
.tb{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mut);
  text-decoration:none;cursor:pointer;
  transition:color var(--t2) var(--out),transform var(--t2) var(--out)}
.tb svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.tb .k{font-size:8px}
.tb.on,.tb.on .k{color:var(--ink)}
.tb:active{transform:scale(var(--p3))}
@media(hover:hover) and (pointer:fine){.tb:hover{color:var(--ink)}}
/* На телефоне подписи не влезали в строку — иконок достаточно */
.tb .k{display:none}
/* На десктопе полосы нет вовсе: от неё остаётся плавающий «+» в углу
   контентной области, над ним — временная листалка разделов. */
@media(min-width:1000px){
  .tabbar{left:auto;right:calc(var(--chatw, 0px) + 26px);bottom:26px;
    width:auto;height:auto;padding:0;display:block;
    background:none;backdrop-filter:none;border-top:0}
  .tabbar .tb{display:none}
  .plus{width:52px;height:52px;margin:0;box-shadow:0 12px 28px -12px rgba(14,18,11,.55)}
  .plus svg{width:22px;height:22px}
}


/* ── БУРГЕР И МЕНЮ ──────────────────────────────────────────
   Шапка одинаковая на всех экранах: NASKORO, точка синхронизации, бургер.
   Эталон — дашборд, стили перенесены сюда, чтобы не расходились. */
.burger{width:32px;height:32px;display:grid;place-content:center;flex:none;cursor:pointer;
  transition:transform var(--t2) var(--out)}
.burger:active{transform:scale(var(--p3))}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);margin:3px 0}

/* ── МЕНЮ ───────────────────────────────────────────────────
   По референсу: строки во всю ширину, крупная надпись капсом по центру,
   не жирная, между строками волосок. Фон фирменный светлый, при наведении
   строка становится чернильной, а текст — светлым. */
#mt{display:none}
.ovl{position:fixed;inset:0;z-index:40;background:var(--bg);
  display:flex;flex-direction:column;
  clip-path:inset(0 0 100% 0);transition:clip-path var(--t3) var(--out);pointer-events:none}
#mt:checked~.ovl{clip-path:inset(0 0 0 0);pointer-events:auto;
  transition:clip-path var(--t4) var(--out)}
/* отступы ровно как у .hdr внутри .content — иначе логотип прыгает при открытии */
.ovl .top{flex:none;display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:14px 16px 12px;min-height:58px}
@media(min-width:760px){.ovl .top{padding:14px 26px 12px}}
.ovl .wm{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1;letter-spacing:-.022em;
  color:var(--ink);text-decoration:none}
.ovl .cl{font-family:var(--micro);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);cursor:pointer;padding:6px 2px;
  transition:color var(--t2) var(--out)}
@media(hover:hover) and (pointer:fine){.ovl .cl:hover{color:var(--ink)}}
.ovlnav{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
/* Появление строк — АНИМАЦИЯ, а не переход: у перехода была лесенка задержек,
   и та же задержка тормозила подсветку при наведении. */
.ovl a:not(.wm){flex:1 0 auto;min-height:54px;display:grid;place-content:center;
  border-top:var(--bw) solid var(--br);text-decoration:none;
  font-family:var(--disp);font-weight:400;font-size:clamp(21px,5vw,32px);
  letter-spacing:.01em;text-transform:uppercase;color:var(--ink);
  opacity:0;transform:translateY(8px);
  transition:background var(--t1) var(--out),color var(--t1) var(--out)}
@keyframes mrise{to{opacity:1;transform:none}}
#mt:checked~.ovl a:not(.wm){animation:mrise .26s var(--out) forwards}
#mt:checked~.ovl a:nth-of-type(1){animation-delay:0.026s}
#mt:checked~.ovl a:nth-of-type(2){animation-delay:0.052s}
#mt:checked~.ovl a:nth-of-type(3){animation-delay:0.078s}
#mt:checked~.ovl a:nth-of-type(4){animation-delay:0.104s}
#mt:checked~.ovl a:nth-of-type(5){animation-delay:0.130s}
#mt:checked~.ovl a:nth-of-type(6){animation-delay:0.156s}
#mt:checked~.ovl a:nth-of-type(7){animation-delay:0.182s}
#mt:checked~.ovl a:nth-of-type(8){animation-delay:0.208s}
#mt:checked~.ovl a:nth-of-type(9){animation-delay:0.234s}
#mt:checked~.ovl a:nth-of-type(10){animation-delay:0.260s}
#mt:checked~.ovl a:nth-of-type(11){animation-delay:0.286s}

.ovl a:not(.wm):active{background:var(--ink);color:var(--bg)}
@media(hover:hover) and (pointer:fine){
  .ovl a:not(.wm):hover{background:var(--ink);color:var(--bg)}
}

/* ── ШАПКА ─────────────────────────────────────────────────── */
.hdr{display:flex;align-items:center;gap:12px;padding:14px 0 12px}
.wordmark{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1;flex:1;
  color:inherit;text-decoration:none}
.sync{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none;
  animation:pulse 2.4s var(--inout) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ═══ Ш4 · ФОРМА БЫСТРОГО ВВОДА ═══════════════════════════════
   Телефон — лист снизу. Десктоп — окно по центру.
   Полоса 1: данные уходят в n8n готовыми, без разбора моделью. */

.scrim{position:fixed;inset:0;background:rgba(14,18,11,.42);z-index:50;
  opacity:0;pointer-events:none;transition:opacity var(--t3) var(--out)}
.scrim.on{opacity:1;pointer-events:auto}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--surf);border-top:var(--bw) solid var(--br2);
  border-radius:var(--r) var(--r) 0 0;
  padding:0 16px calc(16px + env(safe-area-inset-bottom));
  max-height:92vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  transform:translateY(101%);visibility:hidden;
  transition:transform var(--t4) var(--out),visibility 0s var(--t4)}
.sheet.on{transform:none;visibility:visible}
/* Полосы прокрутки прячем везде: системный скроллбар съедает край,
   и скругление остаётся только с одной стороны. Прокрутка работает. */
.sheet,.scrollable{scrollbar-width:none;-ms-overflow-style:none}
.sheet::-webkit-scrollbar,.scrollable::-webkit-scrollbar{width:0;height:0;display:none}

/* ручка листа — намёк, что тянется */
.grab{width:38px;height:4px;border-radius:2px;background:var(--br);
  margin:10px auto 4px;flex:none}

.fhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0 14px;position:sticky;top:0;background:var(--surf);z-index:2}
.fhead .ttl{font-family:var(--disp);font-weight:700;font-size:17px}
.fclose{width:30px;height:30px;border-radius:50%;border:var(--bw) solid var(--br);flex:none;
  display:grid;place-content:center;color:var(--mut);
  transition:border-color var(--t2) var(--out),color var(--t2) var(--out),transform var(--t1) var(--out)}
.fclose:active{transform:scale(var(--p3))}
@media(hover:hover) and (pointer:fine){.fclose:hover{border-color:var(--br2);color:var(--ink)}}

/* поле формы */
.f{margin-bottom:14px}
.f>.k{display:block;margin-bottom:7px}

/* ── ПЕРЕКЛЮЧАЕМЫЕ БЛОКИ ────────────────────────────────────
   Блоки, которые появляются и исчезают при смене типа операции.
   Анимируем grid-template-rows, а не max-height: max-height нужно
   задавать «с запасом», и на коротком блоке получается рывок в конце.
   Содержимое одновременно уходит в прозрачность — глазу это читается
   как замена, а не как прыжок. */
.swap{display:grid;grid-template-rows:1fr;
  transition:grid-template-rows var(--t3) var(--out),
             margin-bottom var(--t3) var(--out)}
.swap>.swapin{min-height:0;overflow:hidden;
  opacity:1;transform:none;
  /* содержимое проявляется ПОСЛЕ того, как высота уже поехала:
     иначе чипы «выползают» из-под края и это читается как рывок */
  transition:opacity var(--t2) var(--out) 60ms, transform var(--t3) var(--out) 60ms}
.swap.off{grid-template-rows:0fr;margin-bottom:0;pointer-events:none}
.swap.off>.swapin{opacity:0;transform:translateY(-6px);visibility:hidden;
  transition:opacity var(--t1) var(--out), transform var(--t2) var(--out), visibility 0s var(--t2)}
.swap>.swapin>.k{display:block;margin-bottom:7px}

@media(prefers-reduced-motion:reduce){
  .swap{transition:none}
}

/* сумма — главное поле, крупная цифра */
.amount{display:flex;align-items:baseline;gap:10px;
  border:var(--bw) solid var(--br2);border-radius:var(--r);background:var(--bg);
  padding:14px 16px;transition:border-color var(--t2) var(--out)}
.amount:focus-within{border-color:var(--ink)}
.amount input{flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-family:var(--disp);font-weight:700;font-size:clamp(30px,9vw,38px);line-height:1.05;
  letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.amount input::placeholder{color:var(--br)}
/* В ФОРМЕ суммы полные — 69 000, не 69k. Ошибка на порядок недопустима. */
.cur{font-family:var(--micro);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:var(--mut);flex:none;padding:6px 2px;cursor:pointer;
  transition:color var(--t2) var(--out)}
@media(hover:hover) and (pointer:fine){.cur:hover{color:var(--ink)}}

/* курс — появляется только для валюты, отличной от домашней */
.rate{display:none;margin-top:8px;align-items:center;gap:10px;
  border:var(--bw) solid var(--br);border-radius:var(--r);background:var(--bg);padding:10px 14px}
.rate.on{display:flex}
.rate input{flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-family:var(--disp);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.rate .src{font-size:11px;color:var(--mut);flex:none}
.rate .eq{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;flex:none}

/* сегменты: тип операции */
/* minmax(0,1fr), а не 1fr: иначе самая длинная надпись («Возврат»)
   задаёт минимальную ширину всему ряду и распирает страницу */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;
  border:var(--bw) solid var(--br);border-radius:999px;background:var(--surf);overflow:hidden}
.seg button{padding:11px 4px;text-align:center;font-size:12.5px;color:var(--mut);
  min-width:0;white-space:nowrap;
  transition:background var(--t2) var(--out),color var(--t2) var(--out)}
@media(max-width:390px){.seg button{font-size:11.5px;padding:11px 2px}}
.seg button.on{background:var(--ink);color:var(--bg);border-radius:999px}

/* ряды чипов: счёт, категория */
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* строчные поля */
.inp{width:100%;border:var(--bw) solid var(--br);border-radius:var(--r);background:var(--bg);
  padding:13px 15px;font-size:14px;outline:0;
  transition:border-color var(--t2) var(--out)}
.inp:focus{border-color:var(--br2)}
.inp::placeholder{color:var(--br)}
textarea.inp{resize:none;min-height:76px;line-height:1.45}

/* дата — два быстрых чипа плюс календарь для записи задним числом */
.dates{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dates .pil{gap:7px}
.dates .pil svg{flex:none}

/* ── КАЛЕНДАРЬ ──────────────────────────────────────────────
   Свой, а не нативный: системный пикер приходит чужим шрифтом,
   синим акцентом и своей сеткой — в макете это инородное тело. */
.datefield{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;border:var(--bw) solid var(--br);border-radius:var(--r);background:var(--bg);
  padding:13px 15px;font-size:14px;text-align:left;font-variant-numeric:tabular-nums;
  transition:border-color var(--t2) var(--out)}
.datefield svg{width:16px;height:16px;stroke:var(--mut);fill:none;stroke-width:1.7;flex:none}
.datefield.open,.datefield:focus-visible{border-color:var(--br2)}

.dpwrap{position:relative}
/* Календарь живёт в <body> и позиционируется фиксированно.
   Внутри .sheet его обрезало: у листа есть прокрутка, а значит и своя
   область отсечения — поповер упирался в край и срезался. */
.dp{position:fixed;z-index:80;width:min(300px,calc(100vw - 32px));
  background:var(--surf);border:var(--bw) solid var(--br2);border-radius:var(--r);
  padding:12px;box-shadow:none;
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity var(--t2) var(--out),transform var(--t3) var(--out)}
.dp.on{opacity:1;transform:none;pointer-events:auto}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dp-title{font-family:var(--disp);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--rc);
  transition:background var(--t2) var(--out)}
/* подмена «год ↔ дни» в датапикере шла рывком */
@keyframes dpswap{from{opacity:0;transform:translateY(4px)}}
.dp-title svg{color:var(--mut);transition:transform var(--t2) var(--out)}
@media(hover:hover) and (pointer:fine){.dp-title:hover{background:var(--bg)}}
/* выбор года: без него до 1996-го пришлось бы листать месяцы вручную */
.dp-years{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.dp-years button{padding:11px 4px;border-radius:var(--rc);font-size:13px;
  font-variant-numeric:tabular-nums;text-align:center;
  transition:background var(--t1) var(--out),color var(--t1) var(--out)}
.dp-years button.sel{background:var(--ink);color:var(--bg)}
@media(hover:hover) and (pointer:fine){.dp-years button:hover:not(.sel){background:var(--bg)}}
.dp-nav{display:flex;gap:4px}
.dp-nav button{width:30px;height:30px;border-radius:var(--rc);border:var(--bw) solid var(--br);
  display:grid;place-content:center;color:var(--mut);
  transition:border-color var(--t2) var(--out),color var(--t2) var(--out)}
.dp-nav button:active{transform:scale(var(--p3))}
@media(hover:hover) and (pointer:fine){.dp-nav button:hover{border-color:var(--br2);color:var(--ink)}}
.dp-nav svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.dp-week,.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-week span{font-family:var(--micro);font-weight:700;font-size:9px;letter-spacing:.08em;
  color:var(--mut);text-align:center;padding-bottom:5px;text-transform:uppercase}
.dp-grid button{aspect-ratio:1;border-radius:var(--rc);font-size:13px;
  font-variant-numeric:tabular-nums;display:grid;place-content:center;color:var(--ink);
  transition:background var(--t1) var(--out),color var(--t1) var(--out)}
.dp-grid button.out{color:var(--br)}
.dp-grid button.today{box-shadow:inset 0 0 0 2px var(--br2)}
.dp-grid button.sel{background:var(--ink);color:var(--bg)}
@media(hover:hover) and (pointer:fine){.dp-grid button:hover:not(.sel){background:var(--bg)}}
.dp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;
  border-top:var(--bw) solid var(--br)}
.dp-foot button{font-size:12.5px;color:var(--mut);padding:4px 2px}
@media(hover:hover) and (pointer:fine){.dp-foot button:hover{color:var(--ink)}}

/* чип «Ещё N» — обводка вместо заливки, он не категория */
.cpil.more{background:transparent;color:var(--mut);box-shadow:inset 0 0 0 2px var(--br)}
/* чужой календарь: видно, но выбрать нельзя */
.cpil.ro{opacity:.55;cursor:not-allowed}
.cpil.ro:active{transform:none}

/* «+ Новая» отличается от «Ещё»: это действие, а не раскрытие списка */
.newcat,.pil.dashed{border-style:dashed}
.cpil.newcat{box-shadow:none;border:2px dashed var(--br);color:var(--mut)}

/* поле создания прямо в ряду чипов */
.newin{display:inline-flex;align-items:center;gap:6px;
  border:2px solid var(--br2);border-radius:13px;background:var(--bg);padding:4px 6px 4px 12px}
.newin input{border:0;background:transparent;outline:0;font-size:13px;width:130px;min-width:0}
.newin .ok{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);
  display:grid;place-content:center;font-size:13px;flex:none;line-height:1}
.newin .ok:active{transform:scale(var(--p3))}


/* пара полей в строку: время начала — конца, пробег — литры */
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.two>*{min-width:0}

/* чекбокс-строка: отметка слева, подпись, при включении раскрывает поле */
.chk{display:flex;align-items:center;gap:11px;width:100%;
  border:var(--bw) solid var(--br);border-radius:var(--r);background:var(--bg);
  padding:12px 14px;font-size:14px;text-align:left;
  transition:border-color var(--t2) var(--out)}
/* между чекбоксами всегда воздух — даже если между ними лежит
   свёрнутый блок .sub, из-за которого соседний селектор не срабатывает */
.chk{margin-top:12px}
.chk:first-of-type{margin-top:0}
.chk.small{margin-top:0}
.chk .b{width:20px;height:20px;border:var(--bw) solid var(--br2);border-radius:var(--rc);
  flex:none;position:relative;transition:background var(--t2) var(--out),border-color var(--t2) var(--out)}
.chk .b::after{content:'';position:absolute;inset:2px;background:var(--surf);
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,38% 66%);
  opacity:0;transform:scale(.6);transition:opacity var(--t1) var(--out),transform var(--t1) var(--out)}
.chk.on{border-color:var(--br2)}
.chk.on .b{background:var(--ink);border-color:var(--ink)}
.chk.on .b::after{opacity:1;transform:none}
/* поле, которое раскрывается под отмеченным чекбоксом */
.sub{display:none;margin:10px 0 16px;padding-left:31px}
.sub.on{display:block}
/* элементы внутри раскрытого блока не должны липнуть друг к другу */
.sub>*+*{margin-top:8px}
.sub>[hidden]+*{margin-top:0}

/* мелкий чекбокс внутри раскрытого блока */
.chk.small{padding:9px 12px;font-size:13px;gap:9px}
.chk.small .b{width:17px;height:17px}

/* строка способа связи: подпись — поле — крестик */
.way{display:flex;align-items:center;gap:10px;
  border:var(--bw) solid var(--br);border-radius:var(--r);background:var(--bg);
  padding:10px 12px 10px 14px;transition:border-color var(--t2) var(--out)}
.way+.way{margin-top:8px}
.way:focus-within{border-color:var(--br2)}
.way .k{margin:0;flex:none;min-width:64px}
.way input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:14px}
.way input::placeholder{color:var(--br)}
.wdel{width:26px;height:26px;border-radius:50%;flex:none;color:var(--mut);
  display:grid;place-content:center;
  transition:background var(--t2) var(--out),color var(--t2) var(--out)}
.wdel:active{transform:scale(var(--p3))}
@media(hover:hover) and (pointer:fine){.wdel:hover{background:var(--surf);color:var(--ink)}}

/* компактная строка «подпись — поле — единица»:
   отдельная строка под ярлык и широкий инпут занимали пол-экрана ради одной цифры */
.row-inp{display:flex;align-items:center;gap:10px;
  border:var(--bw) solid var(--br);border-radius:var(--r);background:var(--bg);
  padding:10px 14px;transition:border-color var(--t2) var(--out)}
.row-inp:focus-within{border-color:var(--br2)}
.row-inp .k{margin:0;flex:none}
.row-inp input{flex:1;min-width:0;width:100%;border:0;background:transparent;outline:0;
  font-family:var(--disp);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;
  text-align:right}
.row-inp input::placeholder{color:var(--br);font-weight:400}
.row-inp .unit{font-family:var(--micro);font-weight:700;font-size:10px;letter-spacing:.1em;
  color:var(--mut);flex:none;text-transform:uppercase}

/* низ формы */
.factions{display:flex;flex-direction:column;gap:9px;padding-top:4px;margin-top:2px}
.voice{display:flex;align-items:center;justify-content:center;gap:9px}
.voice svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* подсказка режима поездки */
.tripnote{display:flex;align-items:center;gap:9px;margin-bottom:14px;
  border:var(--bw) dashed var(--br2);border-radius:var(--r);padding:11px 13px;
  font-size:12.5px;color:var(--mut);background:var(--bg)}
.tripnote b{font-family:var(--disp);color:var(--ink)}

/* ── ДЕСКТОП: лист превращается в окно по центру ─────────────── */
@media(min-width:900px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,calc(100vw - 48px));
    transform:translate(-50%,-46%) scale(.98);opacity:0;
    border:var(--bw) solid var(--br2);border-radius:var(--r);
    padding:0 20px 20px;max-height:86vh;
    transition:transform var(--t3) var(--out),opacity var(--t2) var(--out),visibility 0s var(--t3)}
  .sheet.on{transform:translate(-50%,-50%);opacity:1;visibility:visible;
    transition:transform var(--t3) var(--out),opacity var(--t2) var(--out),visibility 0s}
  .grab{display:none}
  .fhead{padding:16px 0 14px}
}

/* ── СИСТЕМНЫЕ НАСТРОЙКИ ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  /* Раньше блок просто ускорял всё до 120мс — движение оставалось.
     Правильно так: перемещение убрать, прозрачность и цвет оставить. */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;transition-delay:0s!important;
    transition-duration:.14s!important}
  .st,.msg,.card5,.think,.voice,.pit{opacity:1;transform:none}
  .ovl a:not(.wm){opacity:1;transform:none}
  .mqi{animation:none}
  /* лист не выезжает снизу, а просто проявляется */
  .sheet{transform:none!important;opacity:0;visibility:hidden;
    transition:opacity .14s var(--out),visibility 0s .14s!important}
  .sheet.on{opacity:1;visibility:visible;
    transition:opacity .14s var(--out),visibility 0s!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .tabbar{background:var(--bg);backdrop-filter:none}
}
@media(prefers-contrast:more){
  :root{--br:#7C8676;--mut:#4A5142}
  .card,.pil,.inp,.amount{border-width:2px}
}


/* ═══ ЧАТ-ДОК: ОБОЛОЧКА ════════════════════════════════════════
   Один и тот же док на всех экранах. Ширина задана ОДНА НА ВСЕ:
   --chatw:clamp(360px,24vw,520px) — менять только здесь. */
:root{--chatw:clamp(360px,24vw,520px)}
/* ── ЧАТ-ДОК ──────────────────────────────────────────────────
   Не своя версия чата, а тот же экран Ш «Чат»: шапка с аватаром,
   пузыри, композер со скрепкой и микрофоном. Высота композера
   равна высоте таббара — иначе на стыке видна ступенька. */
.chatdock{display:none}

@media(min-width:1000px){
  /* Док двигает страницу ТОЛЬКО там, где он есть. На дашборде чат — колонка
     грида, и безусловный padding-right сжимал контент второй раз. */
  body:has(.chatdock){padding-right:var(--chatw)}
  .chatdock{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;
    width:var(--chatw);background:var(--bg);border-left:var(--bw) solid var(--br);z-index:30}

  .chdr{flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px;
    border-bottom:var(--bw) solid var(--br);background:var(--surf)}
  .chdr .av{width:34px;height:34px;border-radius:50%;background:var(--ink);flex:none;
    display:grid;place-content:center}
  .chdr .av svg{width:18px;height:18px;stroke:var(--bg);fill:none;stroke-width:1.8}
  .chdr .who{flex:1;min-width:0;line-height:1.2}
  .chdr .who .nm{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em}
  .chdr .who .st{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--mut);margin-top:1px}
  .chdr .who .st i{width:6px;height:6px;border-radius:50%;background:#527439;flex:none;
    animation:pulse 2.4s var(--inout) infinite}
  .icbtn{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-content:center;
    transition:transform var(--t2) var(--out),background var(--t2) var(--out)}
  .icbtn svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.8}
  @media(hover:hover) and (pointer:fine){.icbtn:hover{background:var(--surf)}}

  .feed{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding:16px 14px 10px;display:flex;flex-direction:column;gap:11px;
    scrollbar-width:none;-ms-overflow-style:none}
  .feed::-webkit-scrollbar{display:none}
  .feed>*{flex:0 0 auto}
  /* .day2 — то же самое, так подписан разделитель дня в дашборде и календаре */
  .day,.day2{align-self:center;font-family:var(--micro);font-weight:700;font-size:9px;letter-spacing:.14em;
    color:var(--mut);text-transform:uppercase;padding:2px 12px;border:var(--bw) solid var(--br);
    border-radius:999px;background:var(--surf);margin:2px 0 4px}
  .msg{max-width:86%;padding:10px 14px;font-size:14px;line-height:1.45;border-radius:18px;
    overflow-wrap:anywhere}
  .msg.me{align-self:flex-end;background:var(--ink);color:var(--bg);border-bottom-right-radius:6px}
  .msg.bot{align-self:flex-start;background:var(--surf);border:var(--bw) solid var(--br);
    border-bottom-left-radius:6px}

  /* та же высота, что у таббара: 66px — стык идёт одной линией */
  .composer{flex:none;height:calc(66px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
    padding-inline:12px;border-top:var(--bw) solid var(--br);background:var(--surf)}
  .cadd{width:40px;height:40px;border-radius:50%;border:var(--bw) solid var(--br);background:var(--bg);
    display:grid;place-content:center;transition:border-color var(--t2) var(--out),transform var(--t2) var(--out)}
  .cadd:active{transform:scale(var(--p3))}
  .cadd svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.8}
  .field{min-width:0;height:40px;display:flex;align-items:center;gap:8px;
    border:var(--bw) solid var(--br);border-radius:20px;background:var(--bg);padding:0 6px 0 15px}
  .field .ph{flex:1;min-width:0;color:var(--mut);font-size:13.5px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .field .slash{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-content:center;
    font-family:var(--disp);font-weight:700;font-size:15px;color:var(--mut);
    transition:background var(--t2) var(--out),color var(--t2) var(--out)}
  @media(hover:hover) and (pointer:fine){.field .slash:hover{background:var(--surf);color:var(--ink)}}
  .cmic{width:40px;height:40px;border-radius:50%;background:var(--ink);
    display:grid;place-content:center;transition:transform var(--t2) var(--out)}
  .cmic:active{transform:scale(var(--p3))}
  .cmic svg{width:18px;height:18px;stroke:var(--bg);fill:none;stroke-width:1.9}
}


/* ═══ ЧАТ: КОМАНДЫ, ВЛОЖЕНИЯ, ГОЛОС ═══════════════════════════
   Разметку дока даёт страница, поведение — chat.js. Листы команд и
   вложений живут ВНУТРИ композера и приклеены к его верхней границе,
   поэтому одинаково работают и в доке (.chatdock), и в колонке (.chat). */
.composer{position:relative}
/* настоящее поле ввода вместо подписи-заглушки */
.cin{flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-family:var(--body);font-size:13.5px;color:var(--ink)}
.cin::placeholder{color:var(--mut)}

.cmdsheet,.attsheet{position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);z-index:6;
  max-height:min(52vh,340px);overflow-y:auto;background:var(--surf);
  border:var(--bw) solid var(--br);border-radius:var(--r);
  box-shadow:0 22px 44px -26px rgba(14,18,11,.55);
  opacity:0;transform:translateY(8px) scale(.99);transform-origin:bottom center;pointer-events:none;
  transition:opacity var(--t2) var(--out),transform var(--t3) var(--out)}
.cmdsheet.on,.attsheet.on{opacity:1;transform:none;pointer-events:auto}
.cmd,.att{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;text-align:left;
  border-top:var(--bw) solid var(--br);transition:background var(--t1) var(--out)}
.cmdsheet>.cmd:first-child,.attsheet>.att:first-child{border-top:0}
.cmd .sl{font-family:var(--disp);font-weight:700;font-size:13.5px;flex:none}
.cmd .cd{font-size:12px;color:var(--mut);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.att svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8;flex:none}
.att span{font-size:13.5px}
.cmd.sel,.att.sel{background:var(--bg)}
@media(hover:hover) and (pointer:fine){.cmd:hover,.att:hover{background:var(--bg)}}
.cmdempty{padding:13px 14px;font-size:12.5px;color:var(--mut)}

/* запись голоса — накрывает строку композера, пока держат микрофон */
.voicerec{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);
  height:40px;display:none;align-items:center;gap:10px;z-index:7;
  padding:0 6px 0 14px;border-radius:20px;background:var(--ink);color:var(--bg)}
.voicerec.on{display:flex}
.voicerec .rd{width:8px;height:8px;border-radius:50%;background:#c2593f;flex:none;
  animation:pulse 1.2s var(--inout) infinite}
.voicerec .rt{font-family:var(--disp);font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums;flex:none}
.voicerec .rw{flex:1;min-width:0;height:18px;display:flex;align-items:center;gap:2px;overflow:hidden}
.voicerec .rw i{flex:1;background:rgba(235,241,229,.5);border-radius:1px}
.voicerec .rc{font-size:11px;color:rgba(235,241,229,.6);white-space:nowrap;flex:none}
.voicerec .rs{width:30px;height:30px;border-radius:50%;background:var(--bg);flex:none;
  display:grid;place-content:center}
.voicerec .rs svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2}
@media(max-width:420px){.voicerec .rc{display:none}}

/* вложение и голосовое в ленте */
.msg.file{display:flex;align-items:center;gap:9px}
.msg.file svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.vmsg{align-self:flex-end;display:flex;align-items:center;gap:10px;max-width:86%;
  padding:9px 14px;border-radius:18px;border-bottom-right-radius:6px;
  background:var(--ink);color:var(--bg)}
.vmsg .pl{width:22px;height:22px;border-radius:50%;background:var(--bg);flex:none;
  display:grid;place-content:center}
.vmsg .pl svg{width:9px;height:9px;fill:var(--ink)}
.vmsg .wave{flex:1;min-width:60px;height:18px;display:flex;align-items:center;gap:2px}
.vmsg .wave i{flex:1;background:rgba(235,241,229,.55);border-radius:1px}
.vmsg .tm{font-family:var(--disp);font-weight:700;font-size:11.5px;
  font-variant-numeric:tabular-nums;flex:none}
/* «печатает…» */
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:18px;
  border-bottom-left-radius:6px;background:var(--surf);border:var(--bw) solid var(--br)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);
  animation:tdot 1.1s var(--inout) infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}


/* ═══ ПАЛИТРА КОМАНД по «+» (радиальное меню) ══════════════════
   «+» раскрывает веер действий полукругом. Фон СВЕТЛЕЕТ (занавес
   цвета приложения), чтобы палитра читалась. Позиции лучей считает
   plus.js от центра кнопки — работает и на телефоне (кнопка снизу
   по центру), и на десктопе (плавающая кнопка в правом нижнем углу). */
.pal{position:fixed;inset:0;z-index:70;pointer-events:none;
  opacity:0;transition:opacity var(--t2) var(--out);
  touch-action:none;overscroll-behavior:contain;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* при открытой палитре ничего не выделяется (елозишь пальцем по лучам) */
.pal,.pal *,.plus{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pal.on{opacity:1;pointer-events:auto}
.palscrim{position:absolute;inset:0;background:var(--bg);opacity:0;
  transition:opacity var(--t3) var(--out)}
.pal.on .palscrim{opacity:.86}
/* луч-действие: иконка в круге + микроподпись */
.pit{position:absolute;left:0;top:0;width:66px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transform:translate(-50%,-50%) scale(.35);opacity:0;
  transition:transform var(--t4) var(--out),opacity var(--t2) var(--out)}
/* лесенка только на раскрытие: при закрытии лучи гасли тем же порядком и тянулись 430мс */
.pal.on .pit{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition-delay:calc(var(--i,0)*26ms)}
.pit .ic{width:54px;height:54px;border-radius:50%;
  background:var(--surf);border:var(--bw) solid var(--br2);
  display:grid;place-content:center;
  box-shadow:0 12px 26px -12px rgba(14,18,11,.5);
  transition:transform var(--t1) var(--out),background var(--t2) var(--out),border-color var(--t2) var(--out)}
.pit .ic svg{width:23px;height:23px;stroke:var(--ink);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pit .lb{font-family:var(--micro);font-weight:700;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pit:active .ic{transform:scale(var(--p3))}
@media(hover:hover) and (pointer:fine){
  .pit:hover .ic{background:var(--ink);border-color:var(--ink)}
  .pit:hover .ic svg{stroke:var(--bg)}
}
/* подсветка луча при елозинье пальцем (touch drag-select) */
.pit.hot .ic{background:var(--ink);border-color:var(--ink);transform:scale(1.12)}
.pit.hot .ic svg{stroke:var(--bg)}
/* центр — тот же «+», развёрнутый в крестик; тап по нему закрывает */
.palx{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;
  background:var(--ink);display:grid;place-content:center;
  transform:translate(-50%,-50%) rotate(0);opacity:0;
  box-shadow:0 12px 28px -12px rgba(14,18,11,.55);
  transition:transform var(--t3) var(--out),opacity var(--t2) var(--out)}
.pal.on .palx{opacity:1;transform:translate(-50%,-50%) rotate(135deg)}
.palx svg{width:22px;height:22px;stroke:var(--bg);fill:none;stroke-width:2.4;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){
  .pit,.palx{transition-duration:.12s}
}

/* ═══ СКЕЛЕТОН ═══════════════════════════════════════════════
   Пока не пришли данные, на месте числа стоит серая плашка,
   а не демо-значение из макета: «340K» на секунду — это враньё. */
.sk{position:relative;color:transparent!important}
.sk::after{content:'';position:absolute;inset:6% 0 18% 0;border-radius:6px;
  background:linear-gradient(90deg,var(--br) 0%,rgba(0,0,0,.04) 50%,var(--br) 100%);
  background-size:200% 100%;opacity:.5;animation:skw 1.4s linear infinite}
.pill .big.sk::after{inset:10% 34% 22% 0}
.stat .v.sk::after{inset:14% 40% 24% 0}
@keyframes skw{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.sk::after{animation:none}}

/* ═══ КАРТОЧКА СУЩНОСТИ ═══════════════════════════════════════
   Карточка — ТОТ ЖЕ ЛИСТ, что форма Ш4: у неё класс .sheet, поэтому
   вся геометрия, выезд снизу на телефоне и окно по центру на десктопе
   достаются даром. Здесь только то, чего в форме нет: подзаголовок,
   строки «подпись — значение» и крупное число сверху.
   Раньше это была отдельная панель со своим видом — два разных языка
   окон в одном приложении. */
.cardview{z-index:71;background:var(--surf)}
#cvscrim{z-index:70}
.cardview .ctitle{min-width:0}
.cardview .csub{display:block;margin-top:4px}
/* заголовок-дата в карточке дневника: он же кнопка выбора дня */
.cardview .ttl.dpick{display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:2px 0;color:inherit;cursor:pointer;
  font-family:var(--disp);font-weight:700;font-size:17px;text-align:left}
.cardview .ttl.dpick svg{width:12px;height:12px;stroke:var(--mut);fill:none;stroke-width:2.4}
.cardview .ttl.dpick.open svg,.cardview .ttl.dpick:hover svg{stroke:var(--ink)}

/* строки только для чтения */
.sheet .rows{border-top:var(--bw) solid var(--br)}
.sheet .row{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:14px;align-items:baseline;
  width:100%;text-align:left;background:none;border:0;
  padding:11px 2px;border-bottom:var(--bw) solid var(--br)}
.sheet .row .rk{font-family:var(--micro);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.sheet .row .rv{min-width:0;text-align:right;font-size:14px;line-height:1.45;word-break:break-word}
.sheet .row .rv .hotv{color:var(--c-cig,#B05E72)}
.sheet .row.col{grid-template-columns:1fr;gap:5px}
.sheet .row.col .rk{text-transform:none;font-family:var(--body);font-weight:400;
  font-size:14px;letter-spacing:0;color:var(--ink)}
/* Текст в строке-абзаце — это СОДЕРЖИМОЕ (текст заметки, описание события,
   комментарий к операции), а не подпись: читаем его в полную силу.
   Приглушённым остаётся только превью в списке папки — там строка ведёт
   в саму заметку, и главное в ней заголовок. */
.sheet .row.col .rv{text-align:left;white-space:pre-wrap;color:var(--ink);font-size:14px}
.sheet .row.pick .rv{color:var(--mut);font-size:13px}
.sheet .row .rd{display:block;color:var(--mut);font-size:11.5px;margin-top:4px}
/* строка-кнопка (список заметок в папке) */
.sheet .row.pick{cursor:pointer;transition:background var(--t2) var(--out)}
.sheet .row.pick:active{transform:scale(var(--p2))}
@media(hover:hover) and (pointer:fine){.sheet .row.pick:hover{background:var(--bg)}}

/* крупное число сверху — как сумма в форме траты */
.sheet .cbig{text-align:center;padding:6px 0 4px}
.sheet .bigv{font-family:var(--disp);font-weight:700;font-size:clamp(28px,8vw,40px);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sheet .bigv u{text-decoration:none;color:var(--mut);font-size:.4em;font-weight:400;margin-left:8px}
.sheet .bsub{margin-top:7px;font-size:12.5px;color:var(--mut)}

/* ряд чипов-ярлыков (тип операции, календарь, признаки письма) */
.sheet .chiprow{display:flex;flex-wrap:wrap;gap:7px}
/* .small больше НЕ уменьшает чип: «разницы быть не должно никакой»
   (правка Никиты 06.09) — чип категории один на всё приложение */
.sheet .cpil.small{padding:10px 15px;border-radius:13px;font-size:13px;
  background:var(--cb,#e2e6dc);color:var(--c,var(--ink))}
/* нейтральный чип счёта: светлая серо-зелёная подложка, не рамочный
   серый — тот был почти чёрным блоком (правка Никиты 06.09) */
.sheet .cpil.small.hacc{background:color-mix(in srgb,#6E7568 15%,var(--surf));color:var(--ink)}

/* поля ввода в карточке — те же .inp, что в форме */
.sheet textarea.inp{min-height:120px;resize:vertical;line-height:1.5;display:block}
.sheet textarea.inp.tall{min-height:240px}
.sheet .cempty{padding:18px 6px;color:var(--mut);font-size:13.5px;text-align:center}
.sheet .btn.warn{border-color:var(--c-cig,#B05E72);color:var(--c-cig,#B05E72)}
@media(hover:hover) and (pointer:fine){
  .sheet .btn.warn:hover{background:var(--c-cig,#B05E72);border-color:var(--c-cig,#B05E72);color:var(--bg)}}

/* галочка в напоминаниях и задачах — теперь настоящая кнопка */
.ti>.b,.tk>.b,.rem>.remdone{appearance:none;-webkit-appearance:none;cursor:pointer}
.rem>.remdone{width:20px;height:20px;flex:none;border-radius:6px;
  border:var(--bw) solid var(--br2);background:transparent;margin-right:2px}
.ti>.b:active,.tk>.b:active,.rem>.remdone:active{transform:scale(.9)}
.ti.doing,.tk.doing,.rem.doing{opacity:.4;transition:opacity var(--t2) var(--out)}

/* ═══ БАЙК ════════════════════════════════════════════════════
   Верх пополам: одометр крупно слева, четыре цифры справа.
   В журнале первым идёт ПРОБЕГ — именно его ищут глазами. */
.bikehero{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.bikehero .card{padding:16px}
.bikeodo{display:flex;flex-direction:column;justify-content:center}
.bikeodo .big2{margin-top:6px}
.bikenum{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;align-content:center}
.bikenum .bn .v2{margin-top:2px}
.bikelast{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.bikelast .card{padding:16px}
.bikelast .v2{margin-top:4px}
#bike-warn:not(:empty){margin:12px 0 4px}
#bike-warn+.chips2{margin-top:12px}
@media(max-width:759px){
  .bikehero,.bikelast{grid-template-columns:1fr}
  .bikenum{grid-template-columns:1fr 1fr}
}
/* строка журнала — кнопка: по ней открывается правка дня */
.bday{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  width:100%;text-align:left;background:none;border:0;
  padding:12px 2px;border-top:var(--bw) solid var(--br);
  transition:background var(--t2) var(--out)}
.bday:first-of-type{border-top:0}
.bday:active{transform:scale(var(--p2))}
@media(hover:hover) and (pointer:fine){.bday:hover{background:var(--surf)}}
.bkm{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:86px;text-align:right}
.bkm u{text-decoration:none;color:var(--mut);font-size:.5em;font-weight:400;margin-left:4px}
.bday.zero .bkm{color:var(--mut)}
.bday.bad .bkm{color:var(--c-cig,#B05E72)}
.bmeta{min-width:0;display:flex;flex-direction:column;gap:3px}
.bmeta .bd{font-size:14px}
.bmeta .bo{font-size:12.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmk{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.monwrap{position:relative;display:inline-block}
.monmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:180px;max-height:280px;
  overflow-y:auto;padding:6px;background:var(--surf);border:var(--bw) solid var(--br2);
  border-radius:var(--r);box-shadow:0 10px 30px rgba(14,18,11,.14);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--t2) var(--out),transform var(--t2) var(--out)}
.monmenu.open{opacity:1;transform:none;pointer-events:auto}
.monmenu .chip{display:block;width:100%;text-align:left;margin:2px 0;border-radius:8px}

/* засечка плана — заметная, а превышение подписано числом */
#s-money .pf .ln u{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ink);opacity:1;
  border-radius:2px;box-shadow:0 0 0 2px var(--surf)}
#s-money .pf.isover .ln i{background:repeating-linear-gradient(135deg,
  var(--c,var(--ink)) 0 7px, color-mix(in srgb,var(--c,var(--ink)) 60%, #fff) 7px 14px)}
#s-money .pf .pl .ov{color:var(--c-rest);font-weight:600}

/* ═══ ЧАТ: переносы строк и кнопка «/» ═══════════════════════
   Бот отвечает многострочно — списком, абзацами. Без pre-wrap
   всё склеивалось в один кусок текста. */
#s-chat .msg,#chatpane .msg{white-space:pre-wrap}
#s-chat .msg .qbox,#chatpane .msg .qbox{white-space:normal}
.field .slash.on{background:var(--ink);color:var(--bg)}
/* меню команд крепится к самой панели чата, иначе уезжает над экраном */
#chatpane{position:relative}
#cmdsheet{position:absolute;left:12px;right:12px;bottom:calc(100% - 100%);
  top:auto;max-height:min(52vh,420px);overflow-y:auto}
#chatpane #cmdsheet{bottom:86px}
@media(max-width:999px){#chatpane #cmdsheet{bottom:calc(86px + env(safe-area-inset-bottom))}}

/* ═══ СТРОКА ЖУРНАЛА ДЕЙСТВИЙ ════════════════════════════════
   Так же, как строка транзакции: линия-разделитель вместо плашки
   на каждое действие. Живёт и на дашборде, и на своём экране. */
.lrow{display:grid;grid-template-columns:104px minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;
  align-items:center;width:100%;padding:9px 2px;text-align:left;
  border-top:var(--bw) solid var(--br)}
.lrow:first-child{border-top:0}
.lrow .ld{font-family:var(--disp);font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.lrow .ld b{font-weight:700;color:var(--ink)}
.lrow .lt{font-size:13.5px;line-height:1.35;min-width:0}
.lrow .ln2{font-size:12px;color:var(--mut);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lrow .lk{justify-self:end}
.hist .lrow:first-child{border-top:var(--bw) solid var(--br)}
@media(max-width:759px){
  .lrow{grid-template-columns:auto 1fr;grid-template-areas:"d k" "t t" "n n";gap:4px 10px;padding:10px 0}
  .lrow .ld{grid-area:d}
  .lrow .lk{grid-area:k;justify-self:end}
  .lrow .lt{grid-area:t}
  .lrow .ln2{grid-area:n;white-space:normal}
}
/* Дневник больше не собирается из .plainbox и голых полей: у него своя
   карточка на общих кирпичиках Ш4 (дата отдельным полем, под ней большая
   область письма). Осталось только правило фокуса — чтобы подсветка была
   на самом поле и ровно одна, без второй рамки внутри первой. */
.sheet .inp:focus,.sheet .inp:focus-visible{outline:none;border-color:var(--ink)}
/* пустой слот недельной сетки кликается — ставим встречу прямо в него */
#s-calendar #ttbody .hr[data-slot]{cursor:pointer}
@media(hover:hover) and (pointer:fine){
  #s-calendar #ttbody .hr[data-slot]:hover{background:rgba(0,0,0,.035)}}

/* ═══ БАЙК: правки по замечаниям ═════════════════════════════
   Правая карточка съезжала на 10px вниз из-за общего правила
   «.card+.card{margin-top}» — в двухколоночной сетке оно лишнее. */
.bikehero>.card+.card,.bikelast>.card+.card{margin-top:0}
.bikehero,.bikelast{align-items:stretch}
.bikehero>.card,.bikelast>.card{height:100%}
/* дата ТО и заправки — крупно и жирно, это главное в блоке */
#bike-to,#bike-fuel{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.1;
  letter-spacing:-.01em;margin-top:4px}
#bike-tosub,#bike-fuelsub{font-size:12.5px;color:var(--mut);margin-top:5px;line-height:1.35}

/* карточка сущности закрывает экран — плавающая «+» под ней не нужна */
body:has(#cardview.on) .plus,body:has(#cardview.on) .fab{display:none!important}

/* ── ПОРОГ 16px НА СЕНСОРНОМ ЭКРАНЕ ───────────────────────────────
   Дело не в читаемости: iOS увеличивает ВСЮ страницу, когда фокус
   уходит в поле мельче 16px, и экран уезжает за края. На мыши
   оставляем как было — там этой беды нет, а плотность вёрстки дороже.

   Блок стоит В КОНЦЕ файла осознанно: у `.inp{font-size:14px}` ровно
   такая же весомость селектора, и побеждает тот, кто ниже. В первой
   попытке я поставил его выше — правило молча не работало.
   `#rate` выписан отдельно: у него нет класса, его красит правило по id,
   а оно весомее любого класса.
   Крупные поля сумм не задеты: их размер задан по id, это выше классов. */
@media (pointer: coarse){
  input, textarea, select, .inp, .cin, #rate{font-size:16px}
}

/* ── ПОД ЧАСАМИ ───────────────────────────────────────────────────
   С `black-translucent` iOS больше не рисует свою серую полосу: страница
   занимает ВЕСЬ экран, включая место под часами и батареей. Значит верхние
   отступы теперь наши. Без этого логотип NASKORO залезал бы под часы.
   На всём остальном (десктоп, андроид) env(...) равен нулю и ничего не
   меняется. У шапки чата такой отступ был и раньше. */
.hdr{padding-top:calc(14px + env(safe-area-inset-top))}
.ovl .top{padding-top:calc(14px + env(safe-area-inset-top))}

/* ── ПОЛОСА-ДОМОЙ И КЛАВИАТУРА ────────────────────────────────────
   Когда клавиатура открыта, она закрывает собой полосу-домой — но iOS
   продолжает сообщать про неё в env(safe-area-inset-bottom). Композер
   честно резервировал это место, и под строкой ввода висела пустая
   полоса высотой в палец. Это и была «куча пустого места»: она внутри
   нашего композера, а не под ним.

   Отступ вынесен в переменную, чтобы обнулять его на время ввода. */
:root{--sab:env(safe-area-inset-bottom,0px)}
body.kbd-open{--sab:0px}

/* ═══ Noto Color Emoji · правка 29 ══════════════════════════════
   На Windows эмодзи рисуются шрифтом Segoe UI Emoji — плоские и
   непохожие на айфон. Подключаем Noto Color Emoji (COLRv1, лицензия
   OFL) СВОИМ файлом, а не с чужого сервера.
   В стеке он стоит ПОСЛЕ 'Apple Color Emoji': на айфоне и маке
   выигрывает системный шрифт Apple и Noto даже не качается; на
   Windows системного нет — берётся Noto.
   Разбит на десять кусков по unicode-range: браузер тянет только те,
   где реально есть нужные знаки (обычно один-два по 100-200 КБ).
   Обновлять: взять свежий css с fonts.googleapis.com, перекачать
   .woff2 в fonts/emoji/ и заменить блок ниже. */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-0.woff2') format('woff2');
  unicode-range: U+1f1e6-1f1ff;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-1.woff2') format('woff2');
  unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-2.woff2') format('woff2');
  unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f507, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9d1-1f9d2, U+1f9e1, U+1fa75-1fa77, U+1faaf;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-3.woff2') format('woff2');
  unicode-range: U+200d, U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4a5, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f508-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa8e-1fa8f, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-4.woff2') format('woff2');
  unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa8a, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9, U+1fadf;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-5.woff2') format('woff2');
  unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-6.woff2') format('woff2');
  unicode-range: U+200d, U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f344-1f37f, U+1f382, U+1f52a, U+1f7e9, U+1f7eb, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadc;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-7.woff2') format('woff2');
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f6d8, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabf, U+1facd-1facf, U+1fae7;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-8.woff2') format('woff2');
  unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+27a1, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f430, U+1f466-1f469, U+1f46b-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa70, U+1fa82, U+1fac3-1fac5, U+1fac8, U+1faef;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/emoji/noto-emoji-9.woff2') format('woff2');
  unicode-range: U+200d, U+2194-2195, U+2603, U+261d, U+2620, U+2639-263a, U+2665, U+26a1, U+26c4, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f389-1f38a, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a2, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fac6, U+1fae0-1fae6, U+1fae8-1faea, U+1faef-1faf8;
}