/* v3 «Местные» — основа: токены (тёмная по умолчанию, светлая — data-theme="light"), шрифты, каркас приложения
   (шапка, панели, плавающий таб-бар, экраны, нижний лист) и общие компоненты из docs/design_v3.md.
   Подключается ПОСЛЕ наследия беты (c.css, ig.css) и переопределяет его. Владелец — Foundation. */

/* ---------------------------------------------------------------- токены */
:root, :root[data-theme="dark"] {
  --bg: #0C0D10;
  --surface: #16181D;
  --surface-2: #1E2128;
  --surface-3: #2A2E37;
  --line: rgba(255, 255, 255, .07);
  --text: #F2F4F7;
  --text-2: #A3A9B4;
  --text-3: #868D9A;          /* P0-4: 5.3:1 на --surface */
  --accent: #2BD99F;
  --accent-ink: #04140E;
  --accent-soft: rgba(43, 217, 159, .14);
  --red: #FF4D5E;
  --red-soft: rgba(255, 77, 94, .14);
  --amber: #FFB547;
  --amber-soft: rgba(255, 181, 71, .14);
  --blue: #5B9BFF;
  --blue-soft: rgba(91, 155, 255, .15);
  --violet: #8B7BFF;
  --violet-soft: rgba(139, 123, 255, .16);
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, .045);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 48px rgba(0, 0, 0, .6);
  --bar: rgba(26, 28, 34, .78);
  --invert: #F2F4F7;
  --invert-ink: #0E1116;
  --seg-on: #33373F;
  --skel: rgba(255, 255, 255, .06);
  --skel-hi: rgba(255, 255, 255, .11);
  color-scheme: dark;

  /* наследие беты (c.css / ig.css) — на новые цвета, чтобы старые экраны не выбивались */
  --muted: var(--text-2);
  --glass: rgba(22, 24, 29, .94);
  --pri: var(--accent); --pri-2: var(--accent); --pri-soft: var(--accent-soft); --pri-text: var(--accent-ink);
  /* P0-4: мелкий цветной текст — отдельные *-text токены (заливки/иконки остаются на --accent/--amber, им хватает 3:1) */
  --accent-text: #2BD99F; --amber-text: #FFB547; --red-text: #FF6B79; --blue-text: #7FB2FF; --violet-text: #A99CFF;
  --green: #2BD99F; --green-soft: rgba(43, 217, 159, .14); --green-text: #2BD99F;   /* «Отбой», «всё ок» */
  --warm: var(--amber); --warm-soft: var(--amber-soft); --hot: var(--red);
  --ok: #3DDC84; --warn: var(--amber); --bad: var(--red); --plan: var(--blue);
  --ok-bg: rgba(61, 220, 132, .14); --warn-bg: var(--amber-soft); --bad-bg: var(--red-soft); --plan-bg: var(--blue-soft);
  --cat-util: var(--amber); --cat-roads: var(--blue); --cat-inc: var(--red); --cat-city: #7FB2FF; --cat-alert: var(--red);
  --cat-culture: var(--violet); --cat-good: var(--accent); --cat-people: var(--violet);
  --shadow-card: var(--shadow-1); --card-sh: var(--shadow-1);
  --shadow: var(--shadow-2); --shadow-s: 0 1px 4px rgba(0, 0, 0, .5);
  --mm-ph: #1B1E24; --wx-bg: rgba(91, 155, 255, .14); --wx-text: var(--text);
}
:root[data-theme="light"] {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #EEF0F3;
  --surface-3: #E2E5EA;
  --line: rgba(15, 20, 30, .07);
  --text: #0E1116;
  --text-2: #5B6270;
  --text-3: #646B78;          /* P0-4: 4.9:1 на --bg */
  --accent: #12A57A;
  --accent-ink: #FFFFFF;
  --accent-soft: #E2F6EE;
  --red: #E5363F;
  --red-soft: rgba(229, 54, 63, .1);
  --amber: #F08A00;
  --amber-soft: #FFF3E0;
  --blue: #2F6FEB;
  --blue-soft: #E6F1FF;
  --violet: #6A55F0;
  --violet-soft: #EEEBFF;
  --shadow-1: 0 1px 2px rgba(14, 17, 22, .04), 0 4px 12px rgba(14, 17, 22, .05), 0 12px 32px rgba(14, 17, 22, .05);
  --shadow-2: 0 2px 6px rgba(14, 17, 22, .06), 0 18px 48px rgba(14, 17, 22, .14);
  --bar: rgba(255, 255, 255, .8);
  --invert: #0E1116;
  --invert-ink: #FFFFFF;
  --seg-on: #FFFFFF;
  --skel: rgba(14, 17, 22, .06);
  --skel-hi: rgba(14, 17, 22, .1);
  color-scheme: light;

  --accent-text: #0B7F5C; --amber-text: #9A5200; --red-text: #C42830; --blue-text: #2563D9; --violet-text: #5A44E0;
  --green: #12A57A; --green-soft: #E2F6EE; --green-text: #0B7F5C;
  --glass: rgba(255, 255, 255, .94);
  --ok: #16A34A; --ok-bg: #E3F6EC;
  --cat-city: #2F6FEB;
  --shadow-s: 0 1px 4px rgba(14, 17, 22, .12);
  --mm-ph: #E9ECF0; --wx-bg: #E6F1FF;
}
:root {
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Unbounded", "Manrope", system-ui, sans-serif;
  --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px;
  --pad: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --hdr: 60px;
  --tab: 64px;
  --tabbar-space: calc(var(--tab) + 28px + var(--safe-bottom));
  --ease: cubic-bezier(.2, .9, .25, 1);   /* наследие — новое пишем на --ease-out */

  /* ---- P0-6 типографика: 7 ступеней (font-shorthand). Пример: font: var(--t-body); размеры отдельно — --fs-… */
  --t-display:  700 28px/32px var(--font-head);   /* «Доброе утро, Рязань», «Мой район» */
  --t-title:    700 22px/28px var(--font-head);   /* заголовок поста, экрана */
  --t-h1:       var(--t-title);
  --t-headline: 600 17px/24px var(--font-head);   /* заголовок карточки, секции */
  --t-h2:       var(--t-headline);
  --t-body:     500 15px/22px var(--font);        /* текст */
  --t-callout:  700 14px/20px var(--font);        /* кнопки, сегменты, пункты меню, имя автора */
  --t-caption:  600 13px/18px var(--font);        /* мета, подписи */
  --t-micro:    800 11px/14px var(--font);        /* только КАПС-оверлайны (letter-spacing:.04em) и бейджи */
  --fs-display: 28px; --fs-title: 22px; --fs-headline: 17px; --fs-body: 15px; --fs-callout: 14px; --fs-caption: 13px; --fs-micro: 11px;

  /* ---- P1-1 движение */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);     /* появление, сдвиги */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);     /* смена состояния на месте */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);  /* лист, лайк, поп-ап */
  --ease-exit:   cubic-bezier(.4, 0, 1, 1);        /* уход */
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms;
  --d-tap: 90ms; --d-fast: 160ms; --d-base: 240ms; --d-sheet: 420ms; --d-screen: 360ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  /* настоящая пружина (stiffness≈300, damping≈22) там, где есть linear() */
  :root { --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.6%, 1.067 22.8%, 1.085 26.2%, 1.078 29.7%,
    1.042 37.2%, 1.008 46.3%, .993 55.6%, 1 78%, 1); }
}

/* ---------------------------------------------------------------- база */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); overscroll-behavior: none;
  font: 500 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--accent-text); }
h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: -.02em; }
[hidden] { display: none !important; }
img { max-width: 100%; }
.u-head { font-family: var(--font-head); letter-spacing: -.02em; }
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--s { width: 18px; height: 18px; }
.ico--xs { width: 15px; height: 15px; stroke-width: 2.1; }
.tap { transition: transform var(--d-base) var(--ease-spring); }
.tap:active { transform: scale(.96); transition: transform var(--d-tap) var(--ease-out); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* P0-5: хит-зона ≥44 px без изменения видимого размера. <button class="hit"> или .hit на любом элементе */
.hit { position: relative; }
.hit::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- шапка приложения */
.hdr { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: calc(var(--hdr) + var(--safe-top));
  padding: var(--safe-top) var(--pad) 0; display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: none; transition: box-shadow .2s; }
.hdr.scrolled { box-shadow: 0 1px 0 var(--line); }
.hdr-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.hdr-b { display: flex; gap: 8px; align-items: center; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left; }
.brand__mark { position: relative; width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--invert); color: var(--invert-ink); font: 700 16px/1 var(--font-head); }
.brand__mark::after { content: ""; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); }
.brand__name { display: block; font: 600 17px/1.1 var(--font-head); letter-spacing: -.02em; }
.brand__city { display: inline-flex; align-items: center; gap: 2px; font: 700 13px/18px var(--font); color: var(--text-2); margin-top: 1px; }
.hdr { transition: box-shadow var(--d-base), transform var(--d-screen) var(--ease-out), background-color .6s; }
/* P2-4: режим тревоги — по шапке бежит красная линия */
:root[data-mode="alert"] .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red);
  transform-origin: left; animation: alert-scan 2.4s var(--ease-in-out) infinite; }
@keyframes alert-scan { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; }
  50.01% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
.hdr-title { font: var(--t-title); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-tab="map"] .hdr { display: none; }

/* ---------------------------------------------------------------- панели */
.panes { position: fixed; top: calc(var(--safe-top) + var(--hdr)); left: 0; right: 0; bottom: 0; }
body[data-tab="map"] .panes { top: 0; }
.pane { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pane-in { padding: 4px var(--pad) calc(var(--tabbar-space) + 24px); max-width: 640px; margin: 0 auto; }
.pane-map { overflow: hidden; }
/* пока maplibre лениво грузится (app.js loadMapLib) */
.map-wait { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--text-2); font: var(--t-caption); background: var(--bg); }
/* P1-1: глубина — подложка отъезжает влево, пока сверху экран */
.panes { transition: transform var(--d-screen) var(--ease-out); }
body.has-screen .panes, body.has-screen .hdr { transform: translateX(-24%); }

/* ---------------------------------------------------------------- плавающий таб-бар */
.tabbar { position: fixed; z-index: 40; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + var(--safe-bottom)); height: var(--tab);
  max-width: 520px; margin: 0 auto; padding: 0 6px; border-radius: 24px; border: 0;
  display: flex; align-items: center; justify-content: space-around;
  background: var(--bar); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: var(--shadow-2); transition: transform var(--d-screen) var(--ease-out), background-color .6s; }
.tabbar button { position: relative; z-index: 1; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-3); font: 700 11px/14px var(--font); letter-spacing: -.01em; transition: color var(--d-fast); }
.tabbar button .ico { transition: transform var(--d-base) var(--ease-spring); }
.tabbar button:active .ico { transform: scale(.9); transition-duration: var(--d-tap); }
.tabbar [aria-selected="true"] { color: var(--text); }
/* P1-18: активный таб — пилюля под иконкой, переезжает пружиной (app.js movePill). Зелёной точки больше нет. */
.tb-pill { position: absolute; z-index: 0; left: 0; top: 7px; width: 56px; height: 32px; border-radius: 12px; background: var(--surface-2);
  transform: translateX(var(--x, 0px)); opacity: 0; transition: transform 320ms var(--ease-spring), opacity var(--d-fast); pointer-events: none; }
.tb-pill.on { opacity: 1; }
.tb-pill.still { transition: none; }
.tb-l { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar__plus { flex: none !important; width: 64px; }
.tabbar__pl { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 38%, transparent); transition: transform 320ms var(--ease-spring), background-color .6s; }
.ico--plus { width: 24px; height: 24px; stroke-width: 2.2; transition: transform 320ms var(--ease-spring); }
.tabbar__plus:active .tabbar__pl { transform: rotate(90deg) scale(.92); transition-duration: var(--d-tap); }
body.sheet-on .ico--plus { transform: rotate(45deg); }
.tb-dot { position: absolute; top: 8px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); }
body.has-screen .tabbar, body.has-sv .tabbar, body.picking .tabbar { transform: translateY(calc(100% + 40px)); }
.fab { display: none !important; }

/* ---------------------------------------------------------------- кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; height: auto; padding: 0 18px;
  border-radius: var(--r-md); font: var(--t-callout); background: var(--surface-2); color: var(--text); box-shadow: none;
  transition: transform var(--d-base) var(--ease-spring), opacity var(--d-fast); white-space: nowrap; }
.btn:active { transform: scale(.96); transition-duration: var(--d-tap); transition-timing-function: var(--ease-out); }
.btn:disabled { opacity: .55; }
.btn--primary, .btn.pri { background: var(--accent); color: var(--accent-ink); }
.btn--invert { background: var(--invert); color: var(--invert-ink); }
.btn--ghost, .btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn--icon { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); position: relative; }
.btn--icon .ico { width: 20px; height: 20px; }
.btn.wide, .btn--wide { width: 100%; }
.btn--sm { min-height: 36px; height: 36px; padding: 0 12px; border-radius: var(--r-sm); font: 700 13px/18px var(--font); position: relative; }
.btn--sm::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }

/* ---------------------------------------------------------------- бейдж (счётчик) */
.badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font: 800 11px/16px var(--font); text-align: center; font-style: normal;
  border: 2px solid var(--bg); box-sizing: content-box; }
.badge--dot { min-width: 0; width: 8px; height: 8px; padding: 0; top: 8px; right: 9px; }

/* ---------------------------------------------------------------- карточка, плитка */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.tile { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 14px; min-width: 0; text-align: left; color: var(--text); transition: transform var(--d-base) var(--ease-spring); }
button.tile, .tile[role="button"] { cursor: pointer; }
.tile:active { transform: scale(.96); transition-duration: var(--d-tap); transition-timing-function: var(--ease-out); }
.tile--wide { grid-column: 1 / -1; }
/* наследие c.css: .tile был колонкой по центру, .tile span — 13px */
.tile { display: block; align-items: stretch; }
.tile span, .tile b { font-size: inherit; font-weight: inherit; margin-top: 0; }

/* ---------------------------------------------------------------- чипы */
.chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: auto; min-height: 24px; padding: 3px 9px; border-radius: 9px;
  font: 700 13px/18px var(--font); letter-spacing: 0; background: var(--surface-2); color: var(--text-2);
  box-shadow: none; white-space: nowrap; }
.chip i { font-style: normal; }
/* P0-4: мелкий цветной текст — *-text (контраст ≥4.5:1), заливки — прежние */
.chip--red { background: var(--red-soft); color: var(--red-text); }
.chip--amber { background: var(--amber-soft); color: var(--amber-text); }
.chip--blue { background: var(--blue-soft); color: var(--blue-text); }
.chip--violet { background: var(--violet-soft); color: var(--violet-text); }
.chip--accent { background: var(--accent-soft); color: var(--accent-text); }
.chip--green, .chip--ok { background: var(--green-soft); color: var(--green-text); }
.chip .ico { width: 14px; height: 14px; stroke-width: 2.1; }
/* чипы-фильтры (наследие: карта, «Мой район») */
.chips .chip, button.chip { min-height: 36px; padding: 0 13px; border-radius: 12px; font-size: 13px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); }
.chips .chip.on, button.chip.on, .chip.is-on { background: var(--invert); color: var(--invert-ink); box-shadow: none; }

/* ---------------------------------------------------------------- сегменты */
.seg { display: flex; grid-template-columns: none; height: auto; position: relative; gap: 0; padding: 3px; border-radius: var(--r-md);
  background: var(--surface-2); }
.seg__item { flex: 1; min-width: 0; padding: 11px 4px; border-radius: 13px; font: var(--t-callout); color: var(--text-2);
  text-align: center; white-space: nowrap; transition: background var(--d-fast) var(--ease-in-out), color var(--d-fast) var(--ease-in-out); }
.seg__item.is-on { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .08); }
.seg__item em { font-style: normal; color: var(--accent-text); margin-left: 3px; }

/* ---------------------------------------------------------------- аватар */
.avatar { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 13px; overflow: hidden;
  background: var(--av, var(--violet)); color: #fff; font: 800 15px/1 var(--font); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.avatar--lg { width: 92px; height: 92px; border-radius: 30px; font: 700 36px/1 var(--font-head); }

/* ---------------------------------------------------------------- полноэкранные экраны (nav.js openScreen) */
.screen { position: fixed; z-index: 50; inset: 0; display: flex; flex-direction: column; background: var(--bg); transform: translateX(100%);
  transition: transform 280ms var(--ease-exit); will-change: transform; box-shadow: -12px 0 32px rgba(0, 0, 0, .18); }
.screen.in { transform: none; transition: transform var(--d-screen) var(--ease-out); }
.screen.no-anim { transition: none !important; }
.screen.away { transform: translateX(100%); pointer-events: none; }
.s-head { flex: none; display: flex; align-items: center; gap: 8px; height: calc(56px + var(--safe-top)); padding: var(--safe-top) var(--pad) 0;
  border-bottom: 0; background: var(--bg); }
.s-back { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1);
  color: var(--text); display: grid; place-items: center; flex: none; }
.s-back span { display: none; }
.s-title { flex: 1; min-width: 0; text-align: left; font: var(--t-headline); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-share { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); display: grid; place-items: center; flex: none; }
.s-head > i { width: 44px; flex: none; }
.s-body { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: calc(24px + var(--safe-bottom)); }
/* крупная шапка экрана/вкладки: «Мой район», «Профиль» … */
.screen__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px var(--pad) 12px; }
.screen__head h1, .screen__title { margin: 0; font: var(--t-display); letter-spacing: -.03em; }
.screen__head small, .screen__kick { display: block; font: var(--t-caption); color: var(--text-3); margin-bottom: 4px; }
.screen__btns { display: flex; gap: 8px; flex: none; }

/* ---------------------------------------------------------------- нижний лист */
.sheet-backdrop, .scrim { position: fixed; z-index: 59; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity var(--d-base) var(--ease-out); }
.sheet-backdrop.on, .scrim.on { opacity: 1; }
.sheet { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto; max-height: 90vh; display: flex; flex-direction: column;
  border-radius: 28px 28px 0 0; background: var(--surface); box-shadow: var(--shadow-2); transform: translateY(105%);
  transition: transform 260ms var(--ease-exit); }
.sheet.on, .sheet.is-open { transform: none; transition: transform var(--d-sheet) var(--ease-spring); }
.sheet__grab, .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 10px auto 4px; flex: none; position: relative; }
.sheet__grab::before { content: ""; position: absolute; left: -40px; right: -40px; top: -14px; bottom: -14px; }
.sheet-body { overflow-y: auto; padding: 6px var(--pad) calc(20px + var(--safe-bottom)); }

/* ---------------------------------------------------------------- тост */
.toast { position: fixed; z-index: 1100; left: 50%; bottom: calc(var(--tab) + 22px + var(--safe-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 32px); width: max-content; padding: 12px 16px; border-radius: var(--r-md); background: var(--invert); color: var(--invert-ink);
  font: var(--t-callout); box-shadow: var(--shadow-2); text-align: center; }
.toast.show { animation: toast-in var(--d-base) var(--ease-spring); }
.toast--error { background: var(--red); color: #fff; }
@keyframes toast-in { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
body.has-screen .toast { bottom: calc(20px + var(--safe-bottom)); }

/* ---------------------------------------------------------------- пустые состояния */
.empty { text-align: center; padding: 36px 22px 30px; color: var(--text); }
.empty .em, .empty__ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2); font-size: 30px; line-height: 1; }
.empty .em .ico, .empty__ico .ico { width: 28px; height: 28px; }
.empty .em { width: 72px; height: 72px; border-radius: 24px; color: var(--text-3); }
.empty .em .empty__illo { width: 40px; height: 40px; stroke-width: 1.6; }
.empty b { display: block; font: var(--t-headline); letter-spacing: -.02em; }
.empty p { color: var(--text-2); margin: 8px auto 16px; max-width: 300px; font: var(--t-body); }
.boot-err .empty { max-width: 340px; }
.boot-err .em { color: var(--text-2); }
.empty .eb { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- скелетоны */
.skeleton, .sk { display: block; border-radius: 8px; background: var(--skel); position: relative; overflow: hidden; }
/* P2-6: один синхронный блик на весь экран — фон «приклеен» к окну (background-attachment: fixed), двигаем позицию */
.skeleton::after, .sk::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--skel-hi) 50%, transparent 70%) fixed; background-size: 200vw 100%;
  animation: sk-sweep 1.4s var(--ease-in-out) infinite; }
@keyframes sk-sweep { from { background-position: 100vw 0; } to { background-position: -100vw 0; } }
/* «Долго грузится…» — появляется сама через 6 с, если скелет всё ещё на экране */
.sk-slow { display: block; text-align: center; font: var(--t-caption); color: var(--text-3); padding: 10px 0 0; opacity: 0;
  animation: sk-slow-in var(--d-base) var(--ease-out) 6s forwards; }
@keyframes sk-slow-in { to { opacity: 1; } }

/* ---------------------------------------------------------------- «↑ Новое» */
.newpill, #feedPill { position: fixed; z-index: 25; left: 50%; top: calc(var(--safe-top) + var(--hdr) + 10px); transform: translateX(-50%);
  height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: var(--t-callout);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }

.spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- P2-4: режим тревоги для всего приложения
   app.js ставит html[data-mode="alert"], пока тревога активна: акцент → красный, таб-бар с красным оттенком, theme-color. */
:root[data-mode="alert"] { --accent: var(--red); --accent-ink: #FFFFFF; --accent-soft: var(--red-soft); --accent-text: var(--red-text);
  --bar: color-mix(in srgb, var(--red) 14%, var(--surface)); }
:root[data-mode="alert"] .tabbar { background: color-mix(in srgb, var(--red) 12%, var(--bar)); }
body { transition: background-color .6s, color .6s; }

/* ---------------------------------------------------------------- P1-2: shared-element «карточка → пост» (nav.js withViewTransition) */
::view-transition-group(*) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease-in-out); }
::view-transition-image-pair(*) { isolation: isolate; }
/* во время перехода подложка не «едет» (иначе карточка в новом кадре стоит со сдвигом параллакса) */
:root.vt-post .panes, :root.vt-post .hdr { transition: none !important; }

/* ---------------------------------------------------------------- P1-17: слабые устройства — без blur (app.js ставит html.lowfx) */
.lowfx .hdr, .lowfx .tabbar, .lowfx .home-seg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.lowfx .tabbar { background: color-mix(in srgb, var(--surface) 96%, transparent); }
.lowfx .hdr { background: var(--bg); }

/* ---------------------------------------------------------------- P2-8: reduced motion — точечно.
   Смысловые переходы остаются кроссфейдом 150 мс, а сдвиги, параллакс, частицы, «небо», бесконечные пульсы — выключены. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .screen, .screen.in { transform: none !important; opacity: 0; transition: opacity 150ms linear !important; }
  .screen.in { opacity: 1; }
  .sheet { transition: transform 150ms linear !important; }
  body.has-screen .panes, body.has-screen .hdr { transform: none !important; }
  .tap:active, .tile:active, .btn:active { transform: none !important; }
  .tb-pill { transition: opacity 150ms linear !important; }
  .sky *, .live i::after, .t-alert__rings span, .pulse__b:last-child { animation: none !important; }
  ::view-transition-group(*) { animation-duration: 150ms !important; }
  :root[data-mode="alert"] .hdr::after { animation: none !important; transform: none; }
  .fcard.rise, .fcard.enter, .fempty { animation: none !important; }
  .hello-w { animation: none !important; opacity: 1 !important; transform: none !important; }
}