/* Дизайн v3 «Тёплая степь»: тёплый фон, цвета разделов, 3D-иконки, пружинная анимация.
   Стекло (Liquid Glass) — только на навигационном слое: нижняя навигация, верхняя полоса карточки при прокрутке, плавающая панель действий. */

/* ---------- Шрифты (свои файлы, без внешних серверов) ---------- */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/onest-cyrillic-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/onest-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/onest-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/onest-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Заголовочный «Head»: Unbounded; казахских букв в нём нет — их берёт Onest */
@font-face { font-family: 'Head'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/unbounded-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Head'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/unbounded-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Head'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/onest-cyrillic-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0460-052F; }

:root {
  --bg: #F4F1EA;
  --card: #FFFFFF;
  --ink: #1C1917;
  --ink2: #6B635B;
  --ink3: #746B62;
  --accent: #E8572A;
  --accent-d: #C2410C;
  --open: #16A34A;
  --wa: #0F7F43;
  --line: #EDE8DF;
  --chipline: #E3DDD1;
  --surf2: #E9E4D9;
  --teal: #0F766E;
  --sh1: 0 1px 2px rgba(90, 55, 20, .06), 0 10px 26px rgba(90, 55, 20, .08);
  --sh2: 0 2px 4px rgba(90, 55, 20, .08), 0 18px 40px rgba(90, 55, 20, .14);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-t: 450ms;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-d: 'Head', 'Onest', system-ui, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .18, .42, .72, .95, 1.06, 1.04, 1.01, .99, 1); --spring-t: 600ms; }
}

/* Цвета разделов: основной / светлая плитка / чернила на плитке / заливка кнопок с белым текстом (≥ 4.5:1) */
[data-r="food"] { --c: #F97316; --c-tile: #FFE4CC; --c-ink: #7C2D12; --c-btn: #C2410C; }
[data-r="cafe"] { --c: #A16207; --c-tile: #F5E6CF; --c-ink: #4A2C0A; --c-btn: #A16207; }
[data-r="sauna"] { --c: #DC6B4A; --c-tile: #FBDCD0; --c-ink: #6B2416; --c-btn: #BA563A; }
[data-r="health"] { --c: #16A34A; --c-tile: #D7F5DF; --c-ink: #14532D; --c-btn: #15833E; }
[data-r="clinic"] { --c: #EF4444; --c-tile: #FEE2E2; --c-ink: #7F1D1D; --c-btn: #DC2626; }
[data-r="beauty"] { --c: #DB2777; --c-tile: #FCE0EE; --c-ink: #831843; --c-btn: #D72674; }
[data-r="shops"] { --c: #7C3AED; --c-tile: #EBE1FD; --c-ink: #3B0E8C; --c-btn: #7C3AED; }
[data-r="auto"] { --c: #2563EB; --c-tile: #DCE7FD; --c-ink: #1E3A8A; --c-btn: #2563EB; }
[data-r="services"] { --c: #0D9488; --c-tile: #D3F3EF; --c-ink: #134E4A; --c-btn: #0F8379; }
[data-r="phones"] { --c: #0284C7; --c-tile: #D6EEFB; --c-ink: #0C4A6E; --c-btn: #047BBA; }
[data-r="promos"] { --c: #E11D48; --c-tile: #FFE4E6; --c-ink: #881337; --c-btn: #E11D48; }
[data-r="gos"] { --c: #64748B; --c-tile: #E2E8F0; --c-ink: #1E293B; --c-btn: #475569; }
[data-r="med"] { --c: #EF4444; --c-tile: #FEE2E2; --c-ink: #7F1D1D; --c-btn: #DC2626; }
[data-r="edu"] { --c: #EAB308; --c-tile: #FEF3C7; --c-ink: #713F12; --c-btn: #A16207; }
[data-r="zhkh"] { --c: #06B6D4; --c-tile: #CFFAFE; --c-ink: #164E63; --c-btn: #0E7490; }
[data-r="kult"] { --c: #A855F7; --c-tile: #F3E8FF; --c-ink: #581C87; --c-btn: #9333EA; }
[data-r="skoro"] { --c: #6D5DF6; --c-tile: #E6E3FF; --c-ink: #2B2480; --c-btn: #5748E0; }
[data-r] { --c-sh: rgba(90, 55, 20, .3); }
@supports (color: color-mix(in srgb, red, blue)) {
  [data-r] { --c-sh: color-mix(in srgb, var(--c) 48%, transparent); }
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.35; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }
s { text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
h1[tabindex="-1"]:focus, #view:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 12px; font-weight: 600; }
.skip:focus { top: 8px; }

/* Колонка приложения: на телефоне на всю ширину, на компьютере по центру до 480px */
.app { position: relative; max-width: 480px; min-width: 0; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--bg); overflow-x: clip; }
@media (min-width: 520px) {
  html { background: #E6E0D3; }
  .app { box-shadow: 0 0 0 1px rgba(60, 40, 20, .06), 0 24px 70px rgba(60, 40, 20, .16); }
}

/* Стекло (Liquid Glass): blur(12px) saturate(160%), полупрозрачный белый, светлая обводка, блик сверху. Не больше двух стеклянных поверхностей на экране. */
.glass {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 32px rgba(90, 55, 20, .16);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, .94); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
html.lite .glass { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }

.card { background: var(--card); box-shadow: var(--sh1); }

/* Пружинное нажатие: вниз — быстро, вверх — пружиной */
.press { transition: transform var(--spring-t) var(--spring), filter .2s, background-color .2s, color .2s; }
.press:active { transform: scale(.96); transition-duration: 80ms, .2s, .2s, .2s; }

.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico-f { fill: currentColor; stroke: none; }
.ico-s { width: 20px; height: 20px; }
.ico-xs { width: 16px; height: 16px; }

/* «Глиняные» картинки блюд (демо-меню): CSS-фигуры, их рисует clay.js */
.clay { position: absolute; box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .2), inset 4px 4px 8px rgba(255, 255, 255, .55), 0 6px 10px rgba(28, 25, 23, .18); }
.roll { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4A4640, #23211D 70%); }
.roll i { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #F1EADF 70%); }
.roll b { position: absolute; inset: 36%; border-radius: 50%; }
.art-in { position: absolute; transform-origin: 0 0; display: block; width: 156px; height: 104px; }

/* 3D-иконки */
.ic3 { display: block; flex: none; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 6px 7px rgba(90, 55, 20, .22)); }
[data-r] .ic3 { filter: drop-shadow(0 7px 8px var(--c-sh)); }

/* Парение иконок и пульсации — только не в лёгком режиме */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes float2 { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(3px) rotate(-1deg); } }
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
html:not(.lite) .float { animation: float 4s ease-in-out infinite; }

/* ---------- Экран ---------- */
.screen { position: relative; padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px 150px; display: flex; flex-direction: column; gap: 16px; }
.screen.tight { gap: 14px; }
.screen > * { min-width: 0; }

/* Закат над степью: mesh из персикового, коралла и розового, солнце, холмы, зерно */
.sky { position: absolute; left: 0; right: 0; top: 0; height: 400px; overflow: hidden; pointer-events: none; }
.scene { --sky: linear-gradient(180deg, var(--s1) 0%, var(--s2) 52%, var(--s3, var(--bg)) 100%); position: absolute; inset: 0; overflow: hidden; background: var(--sky); }
.scene-dawn { --h1: #F2A98F; --h2: #F0C3AE; --s1: #FFC49E; --s2: #FBCFBF;
  background:
    radial-gradient(58% 52% at 90% 10%, #FFD479 0%, rgba(255, 212, 121, 0) 72%),
    radial-gradient(78% 66% at 4% 16%, #FF9C7C 0%, rgba(255, 156, 124, 0) 74%),
    radial-gradient(84% 62% at 62% 64%, #F7A1BC 0%, rgba(247, 161, 188, 0) 74%),
    linear-gradient(180deg, #FFC49E 0%, #FBCFBF 52%, var(--bg) 100%); }
.scene-dawn .sun { position: absolute; right: 22px; top: 54px; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 45% 42%, #FFF3D1 0%, #FFC972 38%, rgba(255, 150, 80, 0) 72%); }
.scene .hills { position: absolute; left: 0; top: 214px; width: 100%; height: 186px; }
.scene .grain { position: absolute; inset: 0; background-image: var(--grain); opacity: .08; mix-blend-mode: multiply; }
html:not(.lite) .scene-dawn .sun { animation: sun 9s ease-in-out infinite alternate; }
@keyframes sun { to { transform: translateY(6px) scale(1.05); } }

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 5; }
.topbar .round { justify-self: start; }
.round { width: 46px; height: 46px; border-radius: 23px; display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; }
.round.dark { background: var(--ink); color: var(--bg); box-shadow: 0 8px 18px rgba(28, 25, 23, .25); }
.round.white { background: #fff; box-shadow: var(--sh1); }
.hello { display: flex; flex-direction: column; gap: 6px; padding: 16px 4px 0; position: relative; }
h1.big, .hello h1 { font-family: var(--font-d); font-size: clamp(25px, 7.6vw, 31px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; }
.live { font-size: 15px; font-weight: 500; color: #5A4636; display: flex; align-items: center; gap: 10px; }
.live i { position: relative; width: 9px; height: 9px; border-radius: 5px; background: var(--open); flex: none; }
.live i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--open); opacity: .5; }
html:not(.lite) .live i::after { animation: pulse 1.9s ease-out infinite; }

/* Меню профиля */
.menu { position: absolute; left: 16px; top: calc(env(safe-area-inset-top, 0px) + 78px); z-index: 20; width: min(310px, calc(100% - 32px)); border-radius: 24px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--sh2); }
.menu[hidden] { display: none; }
.menu h2 { font-family: var(--font-d); font-size: 15px; font-weight: 600; padding: 4px 0 6px; }
.menu .mrow { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 600; width: 100%; text-align: left; border-radius: 16px; }
.menu .mrow .ic3 { width: 30px; height: 30px; filter: drop-shadow(0 3px 4px rgba(90, 55, 20, .2)); }
.menu .mrow .ico-xs { margin-left: auto; color: var(--ink3); }
.menu .mrow .mv { margin-left: auto; font-style: normal; font-size: 13.5px; font-weight: 500; color: var(--ink3); white-space: nowrap; }
.menu .mrow .mv + .ico-xs { margin-left: 4px; }
/* Язык / Тіл: подпись и переключатель «Русский | Қазақша» на второй строке на всю ширину (казахские слова длиннее) */
.menu .langrow { flex-wrap: wrap; row-gap: 6px; padding: 4px 0 8px; min-height: 0; }
.menu .langrow > .ico { width: 30px; height: 30px; padding: 5px; flex: none; color: var(--ink2); }
.menu .langrow .lt { flex: 1; min-width: 0; }
.menu .langrow .lsw { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; padding: 3px; border-radius: 16px; background: var(--surf2); }
.menu .langrow .lbtn { min-height: 38px; padding: 0 10px; border-radius: 13px; font-size: 14px; font-weight: 600; color: var(--ink2); white-space: nowrap; transition: background-color .2s, color .2s; }
.menu .langrow .lbtn.on { background: var(--ink); color: var(--bg); }
.menu small { font-size: 12.5px; color: var(--ink3); line-height: 1.4; padding-top: 6px; }
.menu small + small { padding-top: 2px; }
.menu small a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Лента акций в шапке: стеклянные карточки, сама едет по кругу (belt.js), листается пальцем ---------- */
.belt { position: relative; z-index: 2; margin: 2px -16px 0; padding: 4px 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.belt::-webkit-scrollbar { display: none; }
.belt-track { display: flex; gap: 10px; width: max-content; padding: 0 16px; }
.bl-card { flex: none; box-sizing: border-box; width: 232px; height: 80px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 24px; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 10px 24px -10px rgba(60, 40, 20, .3); } /* стекло — общий класс .glass (блюр, запасной фон, лёгкий режим) */
.bl-bd { position: relative; flex: none; width: 56px; height: 64px; border-radius: 17px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-d); font-weight: 700;
  background: radial-gradient(90% 90% at 100% 0%, rgba(255, 255, 255, .35), transparent 70%), linear-gradient(135deg, #FB7185, #E11D48); }
.bl-bd b { position: relative; z-index: 1; max-width: 100%; padding: 0 3px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(120, 10, 40, .25); }
.bl-bd.s-m b { font-size: 17px; }
.bl-bd.s-s b { font-size: 12px; }
.bl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-bd .bl-img + b { position: absolute; left: 4px; right: 4px; bottom: 4px; width: auto; max-width: none; padding: 3px 4px; border-radius: 8px; background: rgba(225, 29, 72, .92); font-size: 11px; text-align: center; }
.k-demo .bl-bd { background: radial-gradient(90% 90% at 100% 0%, rgba(255, 255, 255, .4), transparent 70%), linear-gradient(135deg, #FDBA3B, #F9733B); }
.k-own .bl-bd { background: radial-gradient(90% 90% at 100% 0%, rgba(255, 255, 255, .4), transparent 70%), linear-gradient(135deg, #7C3AED, #2563EB); }
.k-own .bl-bd b { font-size: 30px; font-weight: 600; }
.bl-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bl-t { font-size: 13.5px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-p { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; line-height: 1.25; color: #4A3A2D; }
.bl-p span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-demo { flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 7px; background: #FFE08A; color: #5C3F00; }
/* блюр у карточек ленты полегче (8px): их много и они едут; лёгкий режим (html.lite .glass) и «без прозрачности» остаются без блюра */
@media (prefers-reduced-transparency: no-preference) { .bl-card.glass { -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); } }
/* ночное небо: карточки плотнее, чтобы текст читался */
.screen[data-sky="dark"] .bl-card.glass { background: rgba(255, 255, 255, .84); }
html.lite .screen[data-sky="dark"] .bl-card.glass { background: rgba(255, 255, 255, .97); }
@media (prefers-reduced-transparency: reduce) { .screen[data-sky="dark"] .bl-card.glass { background: #fff; } }
#view.enter .belt { animation: pop var(--spring-t) var(--spring) backwards; animation-delay: 200ms; }

/* ---------- Бенто: плитки разделов ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 10px; }
.tile { position: relative; border-radius: 28px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; min-width: 0; color: var(--c-ink); background: var(--c-tile);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 22px -10px var(--c-sh), 0 1px 2px rgba(90, 55, 20, .06); }
@supports (color: color-mix(in srgb, red, blue)) {
  .tile {
    background:
      radial-gradient(72% 62% at 104% -4%, color-mix(in srgb, var(--c) 62%, transparent) 0%, transparent 72%),
      radial-gradient(64% 70% at -6% 106%, color-mix(in srgb, var(--c) 30%, var(--c-tile)) 0%, transparent 72%),
      radial-gradient(48% 48% at 46% 52%, color-mix(in srgb, var(--c) 20%, transparent) 0%, transparent 74%),
      var(--c-tile);
  }
}
/* внутренний блик сверху и зерно */
.tile::before, .tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.tile::before { background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%); }
.tile::after { background-image: var(--grain); opacity: .06; mix-blend-mode: multiply; }
.tile .ti { position: absolute; right: -6px; top: -9px; width: 62px; height: 62px; z-index: 1; }
.tile .tx { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.tile .t { font-family: var(--font-d); font-size: clamp(13px, 3.8vw, 15px); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tile .s { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; line-height: 1.25; opacity: .86; font-variant-numeric: tabular-nums; }
.tile .s i { font-style: normal; }
/* девять маленьких плиток: последняя не остаётся одна в ряду — растягивается на свободные колонки */
.bento > .tile:last-child:nth-child(3n + 1) { grid-column: span 3; }
.bento > .tile:last-child:nth-child(3n + 2) { grid-column: span 2; }
.tile.hero { grid-column: span 2; grid-row: span 2; padding: 16px; }
.tile.hero .hi { position: absolute; right: -12px; top: -16px; width: 152px; height: 152px; z-index: 1; }
.tile.hero .hi2 { position: absolute; right: 12px; bottom: 12px; width: 76px; height: 76px; z-index: 1; }
.tile.hero .t { font-size: 21px; line-height: 1.12; }
.tile.hero .s { font-size: 13px; }
html:not(.lite) .tile.hero .hi2 { animation: float2 5s ease-in-out infinite; }
/* каскад появления плиток */
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.93); } }
#view.enter .tile { animation: pop var(--spring-t) var(--spring) backwards; animation-delay: calc(var(--i, 0) * 55ms); }

.h2row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px; }
.h2row h2, h2.sec { font-family: var(--font-d); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.h2row .more { font-size: 14px; font-weight: 600; color: var(--accent-d); min-height: 24px; }
.h2row .hint { font-size: 13px; color: var(--ink3); }
.block { display: flex; flex-direction: column; gap: 10px; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 16px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 16px; overscroll-behavior-x: contain; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }
.pick { flex: none; width: 256px; border-radius: 24px; padding: 10px; display: flex; gap: 12px; align-items: center; }
.pick .pk { flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--c-tile); display: flex; align-items: center; justify-content: center; }
@supports (color: color-mix(in srgb, red, blue)) {
  .pick .pk { background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--c) 45%, transparent), transparent 75%), var(--c-tile); }
}
.pick .pk .ic3 { width: 42px; height: 42px; }
.pick .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick .nm { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .demo-tag, .dish .demo-tag { margin-left: 6px; vertical-align: 1px; }
.pick .sub { font-size: 12.5px; color: #14703A; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Чипы ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scroll-padding: 0 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 38px; padding: 0 15px; border-radius: 19px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: #fff; box-shadow: inset 0 0 0 1px var(--chipline); transition: border-radius var(--spring-t) var(--spring), transform var(--spring-t) var(--spring), background-color .2s, color .2s; }
.chip:active { transform: scale(.96); transition-duration: 80ms, 80ms, .2s, .2s; }
.chip.on { border-radius: 13px; background: var(--ink); color: var(--bg); box-shadow: none; }
[data-r] .chip.on { background: var(--c-btn); color: #fff; }
.chip .led { width: 8px; height: 8px; border-radius: 4px; background: #4CC38A; }
.chip.on .led { background: #BBF7D0; }
.chip.sm { height: 36px; border-radius: 18px; }
.chip.sm.on { border-radius: 12px; }

/* ---------- Поиск ---------- */
.sfield { height: 56px; border-radius: 28px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 18px; background: #fff; box-shadow: var(--sh1); }
.sfield .ico { color: var(--accent-d); }
.sfield input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 17px; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none; }
.sfield input::placeholder { color: var(--ink3); font-weight: 500; }
.sfield input::-webkit-search-cancel-button { display: none; }
.sfield:focus-within { outline: 3px solid var(--teal); outline-offset: 2px; }
.sfield .x { width: 40px; height: 40px; border-radius: 20px; background: var(--surf2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dish { flex: none; width: 160px; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.pic { position: relative; height: 104px; overflow: hidden; background: var(--c-tile); }
.dish .tx { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dish .nm { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dish .by { font-size: 12.5px; color: var(--ink3); overflow-wrap: anywhere; }
.rows { border-radius: 24px; padding: 6px 12px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rows .row:last-child { border-bottom: 0; }
.mono { flex: none; width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-d); font-weight: 700; font-size: 13px; background: var(--c-tile); color: var(--c-ink); }
.row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .nm { font-weight: 700; font-size: 15.5px; overflow-wrap: anywhere; }
.row .nm .demo-tag { margin-left: 6px; vertical-align: 2px; }
.row .st { font-size: 12.5px; font-weight: 600; color: var(--ink3); overflow-wrap: anywhere; }
.row .st.open { color: #14703A; }
.mini { height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; flex: none; }
.mini.wa { background: var(--wa); color: #fff; }
.mini.call { background: var(--c-btn, var(--accent-d)); color: #fff; }
.mini.ghost { background: var(--bg); }
.demo-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--surf2); color: var(--ink3); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.more-btn { align-self: center; height: 44px; padding: 0 22px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--chipline); font-weight: 600; font-size: 14px; }

/* ---------- Раздел: шапка с градиентом цвета раздела ---------- */
.band { position: relative; border-radius: 28px; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 14px; color: var(--c-ink); background: var(--c-tile); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px -12px var(--c-sh); }
@supports (color: color-mix(in srgb, red, blue)) {
  .band {
    background:
      radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 72%),
      radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--c) 26%, var(--c-tile)), transparent 74%),
      var(--c-tile);
  }
}
.band::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .06; mix-blend-mode: multiply; pointer-events: none; }
.band .bt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding-right: 88px; min-height: 64px; }
.band h1 { font-family: var(--font-d); font-size: clamp(21px, 6.4vw, 26px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; }
.band p { font-size: 14px; font-weight: 600; opacity: .88; }
.band .band-i { position: absolute; right: 8px; bottom: 10px; width: 84px; height: 84px; z-index: 1; }
.sechead { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.sechead p { font-size: 15px; color: var(--ink2); }
.topline { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Карточка заведения в списке ---------- */
.list { display: flex; flex-direction: column; gap: 14px; }
.pcard { border-radius: 24px; overflow: hidden; }
.cover { display: block; position: relative; height: 120px; overflow: hidden; border-radius: 24px 24px 0 0; }
.pcard.closed .cover { height: 88px; }
.pcard.closed .cv-i, .pcard.closed .cv-l { filter: saturate(.55); opacity: .85; }
.pcard.closed .title { color: var(--ink2); }
.pst { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 700; max-width: 100%; background: #E6F6EA; color: #14532D; }
.pst > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pst i { position: relative; width: 8px; height: 8px; border-radius: 4px; background: var(--open); flex: none; }
.pst i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: .5; }
html:not(.lite) .pst.open:not(.chip-pos) i::after { animation: pulse 1.9s ease-out infinite; }
.pst.soon { background: #FEF0C7; color: #78350F; }
.pst.soon i { background: #D97706; }
.pst.off { background: #F7E4E1; color: #8F2F29; }
.pst.off i { background: #C2564D; }
.pst.off i::after { display: none; }
.pst.raw { background: #ECE8E0; color: var(--ink2); }
.pst.raw i { display: none; }
.pst.zapis { background: #E3E8F7; color: #2A3566; }
.chip-pos { position: absolute; left: 12px; top: 12px; z-index: 3; max-width: calc(100% - 24px); box-shadow: 0 4px 10px rgba(90, 55, 20, .14); }
.chip-ak { position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: calc(100% - 24px); height: 30px; padding: 0 12px; border-radius: 15px; background: linear-gradient(100deg, #BE123C, #E11D48); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; box-shadow: 0 6px 12px rgba(225, 29, 72, .3); }
.chip-ak span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.pbody.compact { padding: 12px 16px 14px; }
.pbody .head { display: flex; flex-direction: column; gap: 4px; }
.title { font-family: var(--font-d); font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; overflow-wrap: anywhere; }
.title .demo-tag, .phead .demo-tag { margin-left: 8px; vertical-align: 2px; }
.info { font-size: 13.5px; color: var(--ink2); overflow-wrap: anywhere; }
.acts { display: flex; gap: 8px; }
.btn { flex: 1; min-width: 0; height: 46px; border-radius: 23px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 0 12px; text-align: center; }
.btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.main { background: var(--c-btn); color: #fff; box-shadow: 0 8px 16px -6px var(--c-sh); }
.btn.wa { background: var(--wa); color: #fff; }
.btn.dark { background: var(--ink); color: var(--bg); }
.btn.call { background: var(--accent-d); color: #fff; }
.rbtn { width: 46px; height: 46px; border-radius: 23px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--c-tile, var(--bg)); color: var(--c-ink, var(--ink)); }
.rbtn.wa { background: var(--wa); color: #fff; }
.rbtn .ico { width: 22px; height: 22px; }
#view.enter .pcard { animation: rise .55s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Генеративная обложка ---------- */
.cv { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--c-tile); }
@supports (color: color-mix(in srgb, red, blue)) {
  .cv {
    background:
      radial-gradient(58% 86% at var(--x1) var(--y1), color-mix(in srgb, var(--c) 72%, transparent) 0%, transparent 72%),
      radial-gradient(54% 78% at var(--x2) var(--y2), color-mix(in srgb, var(--c) 34%, #fff) 0%, transparent 74%),
      radial-gradient(46% 66% at var(--x3) var(--y3), color-mix(in srgb, var(--c) 40%, var(--c-tile)) 0%, transparent 76%),
      linear-gradient(var(--ang), var(--c-tile), color-mix(in srgb, var(--c) 24%, var(--c-tile)));
  }
}
.cv::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .07; mix-blend-mode: multiply; pointer-events: none; }
/* в списках зерно — простой полупрозрачный слой без blend-mode (их десятки на экране) */
.cv-list::after { mix-blend-mode: normal; opacity: .045; }
.cv-l { position: absolute; left: calc(var(--lx) * 0.55%); bottom: -.22em; font-family: var(--font-d); font-weight: 800; line-height: 1; color: var(--c-ink); opacity: .12; transform: rotate(var(--rot)); pointer-events: none; user-select: none; }
.cv-list .cv-l { font-size: 96px; bottom: -34px; }
.cv-hero .cv-l { font-size: 190px; bottom: -48px; }
.cv-i { position: absolute; z-index: 1; }
.cv-list .cv-i { right: calc(10px + var(--ix) * 0.28px); top: 50%; margin-top: -32px; width: 64px; height: 64px; }
.cv-hero .cv-i { right: calc(18px + var(--ix) * 0.4px); top: 50%; margin-top: -78px; width: 124px; height: 124px; }
.cv-i2 { position: absolute; z-index: 1; }
.cv-list .cv-i2 { right: 84px; bottom: 14px; }
.cv-hero .cv-i2 { right: 150px; bottom: 56px; }
.cv-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.cv-hero .cv-i { filter: drop-shadow(0 14px 14px var(--c-sh)); }

/* ---------- Пустые состояния ---------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 8px 8px; }
.empty .ic3 { width: 96px; height: 96px; }
.empty h3 { font-family: var(--font-d); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.empty p { font-size: 14.5px; color: var(--ink2); max-width: 30ch; }
.empty .chips { margin-top: 6px; flex-wrap: wrap; justify-content: center; overflow: visible; padding: 0; }

/* ---------- Карточка заведения ---------- */
.place { position: relative; padding-bottom: 150px; }
.pbar { position: sticky; top: 0; z-index: 8; height: 0; }
.pbar .pstrip { position: absolute; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top, 0px) + 74px); border-radius: 0 0 24px 24px; border-top: 0; transform: translateY(-105%); transition: transform .4s var(--spring); pointer-events: none; }
.pbar.scrolled .pstrip { transform: none; }
.pbar .btns { position: absolute; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 14px); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pbar .grp { display: flex; gap: 10px; }
.rb { width: 46px; height: 46px; border-radius: 23px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 16px rgba(60, 35, 10, .2); transition: transform var(--spring-t) var(--spring), background-color .3s, box-shadow .3s; }
.rb:active { transform: scale(.94); transition-duration: 80ms, .3s, .3s; }
.pbar.scrolled .rb { background: rgba(255, 255, 255, .55); box-shadow: none; }
.pbar .ptitle { flex: 1; min-width: 0; text-align: center; font-family: var(--font-d); font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .35s var(--spring); padding: 0 4px; }
.pbar.scrolled .ptitle { opacity: 1; transform: none; }
.pbar .fav.on { color: #E11D48; }
.pbar .fav.on .ico { fill: #E11D48; }
.pcover { position: sticky; top: 0; z-index: 0; height: 40vh; height: 40svh; min-height: 270px; max-height: 420px; overflow: hidden; view-transition-name: place-cover; }
.pcover::before { content: ''; position: absolute; inset: 0; z-index: 3; background: #1C1917; opacity: 0; pointer-events: none; }
.psheet { position: relative; z-index: 1; margin-top: -30px; background: var(--bg); border-radius: 28px 28px 0 0; padding: 22px 16px 0; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 -14px 34px rgba(60, 35, 10, .12); min-height: 60vh; }
.psheet > * { min-width: 0; }
.phead { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.phead h1 { font-family: var(--font-d); font-size: clamp(22px, 6.9vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; overflow-wrap: anywhere; }
.phead .psub { font-size: 15px; color: var(--ink2); overflow-wrap: anywhere; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 6px; border-radius: 16px; font-size: 13px; font-weight: 700; background: var(--c-tile); color: var(--c-ink); }
.rchip .ic3 { width: 20px; height: 20px; filter: none; }
.rchip.plain { padding-left: 12px; background: #fff; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--chipline); }

/* Быстрые действия */
.qa { display: flex; flex-wrap: wrap; gap: 12px 9px; }
.qa-b { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.qa-c { width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 18px -8px var(--c-sh), inset 0 1px 0 rgba(255, 255, 255, .35); }
.qa-c .ico { width: 26px; height: 26px; }
.qa-t { font-size: 12px; font-weight: 600; color: var(--ink2); line-height: 1.1; white-space: nowrap; }
.qa-b.call .qa-c { background: var(--c-btn); }
.qa-b.wa .qa-c { background: var(--wa); box-shadow: 0 10px 18px -8px rgba(15, 127, 67, .6), inset 0 1px 0 rgba(255, 255, 255, .4); }
.qa-b.ig .qa-c { background: radial-gradient(circle at 30% 107%, #FEDA75 0%, #FA7E1E 28%, #D62976 52%, #962FBF 75%, #4F5BD5 100%); box-shadow: 0 10px 18px -8px rgba(214, 41, 118, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.qa-b.site .qa-c { background: linear-gradient(145deg, var(--c), var(--c-btn)); }
.qa-b.route .qa-c { background: #fff; color: var(--c-ink); box-shadow: var(--sh1), inset 0 0 0 1px var(--chipline); }
.qa-b:focus-visible { outline-offset: 4px; border-radius: 16px; }

/* Плитки информации */
.infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.infot { position: relative; min-width: 0; border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 3px; text-align: left; overflow: hidden; }
.infot .ic3 { width: 30px; height: 30px; margin-bottom: 4px; filter: drop-shadow(0 3px 4px rgba(90, 55, 20, .2)); }
.infot .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.infot .l { font-size: 12.5px; color: var(--ink3); }
.infot.wip .v { color: var(--ink3); font-weight: 600; }
.infot.wip .ic3 { opacity: .5; filter: grayscale(.6); }
.infot.addr { grid-column: 1 / -1; min-height: 104px; justify-content: flex-end; color: var(--c-ink); padding-right: 96px; background-color: var(--c-tile);
  background-image:
    linear-gradient(118deg, transparent 46%, rgba(255, 255, 255, .85) 46% 49.5%, transparent 49.5%),
    linear-gradient(28deg, transparent 63%, rgba(255, 255, 255, .85) 63% 66%, transparent 66%),
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(255, 255, 255, .6) 25px 28px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, .6) 31px 34px); }
.infot.addr .v { font-family: var(--font); font-size: 17px; }
.infot.addr .l { color: var(--c-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.infot.addr .l .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.infot.addr .vtxt { align-self: flex-start; background: rgba(255, 255, 255, .78); padding: 6px 10px; border-radius: 12px; display: flex; flex-direction: column; gap: 1px; }
.infot.addr .pinbig { position: absolute; right: 18px; top: 50%; margin-top: -34px; width: 68px; height: 68px; margin-bottom: 0; filter: drop-shadow(0 8px 8px var(--c-sh)); }

/* Акции: купоны с перфорацией */
.cps { display: flex; flex-direction: column; gap: 10px; }
.coupon-w { filter: drop-shadow(0 10px 14px rgba(225, 29, 72, .28)); }
.coupon { display: flex; align-items: stretch; min-height: 78px; border-radius: 22px; color: #fff; background: linear-gradient(105deg, #E11D48, #BE123C);
  -webkit-mask: radial-gradient(circle 10px at 92px 0, #0000 97%, #000) , radial-gradient(circle 10px at 92px 100%, #0000 97%, #000); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 10px at 92px 0, #0000 97%, #000), radial-gradient(circle 10px at 92px 100%, #0000 97%, #000); mask-composite: intersect; }
.coupon .bg { flex: none; width: 92px; display: flex; align-items: center; justify-content: center; border-radius: 22px 0 0 22px; font-family: var(--font-d); font-weight: 800; font-size: 20px; color: #5B0A22; text-align: center; line-height: 1.05; padding: 0 6px;
  background: linear-gradient(150deg, #FDBA3B, #F59E0B 55%, #F9733B);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .85) 50%, transparent 0), linear-gradient(150deg, #FDBA3B, #F59E0B 55%, #F9733B);
  background-size: 2px 9px, 100% 100%; background-position: right top, 0 0; background-repeat: repeat-y, no-repeat; }
.coupon .tx { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 1; min-width: 0; padding: 12px 16px; }
.coupon b { font-size: 15.5px; line-height: 1.2; overflow-wrap: anywhere; }
.coupon small { font-size: 13px; color: #fff; overflow-wrap: anywhere; }

/* Фото владельцев: логотип, галерея, акция с картинкой, фото позиции меню */
.plogo { width: 56px; height: 56px; border-radius: 18px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 14px -8px var(--c-sh); }
.gallery { margin-top: -6px; }
.gph { flex: none; width: 200px; height: 150px; border-radius: 20px; object-fit: cover; background: var(--c-tile); box-shadow: var(--sh1); }
.apromo { border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.ap-img { display: block; width: 100%; max-height: 340px; object-fit: cover; background: var(--c-tile); }
.ap-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px 14px; }
.ap-badge { padding: 3px 10px; border-radius: 12px; background: #E11D48; color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 13px; }
.ap-tx b { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.ap-tx small { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; }
.item .thumb-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menucard { border-radius: 24px; padding: 2px 14px; }
.menu-wip { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 14.5px; color: var(--ink2); }
.menu-wip .ic3 { width: 44px; height: 44px; }
.item { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.menucard .item:last-child { border-bottom: 0; }
.item .thumb { position: relative; width: 60px; height: 60px; border-radius: 18px; overflow: hidden; background: var(--c-tile); }
.item .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item .nm { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.item .ds { font-size: 13px; color: var(--ink3); overflow-wrap: anywhere; }
.item .pr { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.item s { font-size: 13px; color: #8C877D; font-weight: 500; }
.item.off { opacity: .55; }
.item .no { font-size: 12.5px; font-weight: 600; color: var(--ink3); }
.sub { font-family: var(--font-d); font-size: 15px; font-weight: 600; padding: 0 4px; }
.week { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 24px; overflow: hidden; }
.week th, .week td { text-align: left; padding: 11px 16px; font-size: 14.5px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.week tr:last-child th, .week tr:last-child td { border-bottom: 0; }
.week th { width: 64px; font-weight: 600; color: var(--ink3); }
.week tr.today th, .week tr.today td { background: var(--c-tile); color: var(--c-ink); font-weight: 700; }
.hours-raw { font-size: 14.5px; font-variant-numeric: tabular-nums; padding: 0 4px; }
.contacts { border-radius: 24px; padding: 4px 16px; }
.contacts a { display: flex; align-items: center; gap: 12px; min-height: 52px; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.contacts a:last-of-type { border-bottom: 0; }
.contacts .ico { color: var(--c-btn, var(--teal)); }
.contacts .landmark { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; font-size: 14.5px; color: var(--ink2); border-top: 1px solid var(--line); }
.contacts .landmark .ico { margin-top: 1px; }
.note { font-size: 12.5px; color: var(--ink3); padding: 0 4px; line-height: 1.45; }
.note a { text-decoration: underline; text-underline-offset: 2px; }

/* Каскад появления блоков листа */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }
#view.enter .psheet > * { animation: rise-in var(--spring-t) var(--spring) backwards; animation-delay: calc(var(--n, 0) * 55ms); }
.psheet > :nth-child(2) { --n: 1; } .psheet > :nth-child(3) { --n: 2; } .psheet > :nth-child(4) { --n: 3; } .psheet > :nth-child(5) { --n: 4; }
.psheet > :nth-child(6) { --n: 5; } .psheet > :nth-child(7) { --n: 6; } .psheet > :nth-child(n+8) { --n: 7; }

/* ---------- Нижние панели ---------- */
.nav, .dock { position: fixed; z-index: 30; left: 50%; bottom: max(22px, env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 28px), 452px); transform: translateX(-50%); height: 68px; border-radius: 34px; display: flex; align-items: center; padding: 0 8px; }
.nav { justify-content: space-between; view-transition-name: nav; }
.nav[hidden] { display: none; }
.nav a { width: 50px; height: 50px; border-radius: 25px; display: inline-flex; align-items: center; justify-content: center; color: #3A332D; flex: none; transition: transform var(--spring-t) var(--spring), background-color .2s, color .2s; }
.nav a:active { transform: scale(.92); transition-duration: 80ms, .2s, .2s; }
.nav a[aria-current="page"] { color: var(--accent-d); background: rgba(232, 87, 42, .13); }
.nav a.find { width: auto; height: 52px; padding: 0 22px; border-radius: 26px; background: var(--ink); color: var(--bg); gap: 8px; font-weight: 700; font-size: 16px; box-shadow: 0 8px 18px rgba(28, 25, 23, .25); }
.nav a.find[aria-current="page"] { background: var(--accent-d); color: #fff; box-shadow: 0 8px 18px rgba(194, 65, 12, .35); }
.dock { gap: 8px; z-index: 31; }
@media (max-width: 400px) { .nav a { width: 44px; height: 46px; } .nav a.find { padding: 0 16px; font-size: 15px; } }
@media (max-width: 340px) { .nav { padding: 0 6px; } .nav a { width: 40px; } .nav a.find { padding: 0 12px; } }
.dock .go { flex: 1; min-width: 0; height: 52px; border-radius: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 0 12px; }
.dock .go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock .go.wa { background: var(--wa); color: #fff; box-shadow: 0 8px 18px rgba(15, 127, 67, .3); }
.dock .go.call { background: var(--c-btn, var(--accent-d)); color: #fff; box-shadow: 0 8px 18px -4px var(--c-sh); }
.dock .go.dark { background: var(--ink); color: var(--bg); }
.dock .sec { width: 52px; height: 52px; border-radius: 26px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .08); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dock .sec.wa { color: var(--wa); }

/* ---------- Нижний лист «Маршрут» ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.overlay[hidden] { display: none; }
.overlay .back { position: absolute; inset: 0; background: rgba(28, 25, 23, .4); animation: fadein .25s ease both; }
.overlay .panel { position: relative; width: 100%; max-width: 480px; border-radius: 28px 28px 0 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; animation: sheetup var(--spring-t) var(--spring) both; background: var(--bg); box-shadow: 0 -16px 40px rgba(28, 25, 23, .22); }
.panel .grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(28, 25, 23, .2); }
.panel h2 { font-family: var(--font-d); font-size: 16px; font-weight: 600; padding: 4px 4px 0; }
.panel .opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; border-radius: 20px; background: #fff; font-weight: 700; font-size: 16px; box-shadow: var(--sh1); }
.panel .opt .ico { color: var(--teal); }
.panel .close { height: 52px; border-radius: 26px; background: var(--surf2); font-weight: 700; font-size: 15px; }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom, 0px)) + 84px); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 22px; font-size: 14px; font-weight: 600; width: max-content; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 10px 24px rgba(28, 25, 23, .3); }
.toast[hidden] { display: none; }

/* ---------- Полезные телефоны ---------- */
.group { display: flex; flex-direction: column; gap: 10px; }
.ghead { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.ghead .ic3 { width: 40px; height: 40px; filter: drop-shadow(0 4px 5px var(--c-sh)); }
.ghead h2 { font-family: var(--font-d); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.callrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; border-radius: 24px; min-height: 72px; }
.callrow .num { font-family: var(--font-d); font-weight: 700; font-size: 28px; min-width: 76px; letter-spacing: -.02em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.callrow .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.callrow .go { width: 48px; height: 48px; border-radius: 24px; background: var(--c-btn, var(--teal)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 14px -6px var(--c-sh); }
.callrow .tx { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.callrow .tx .nm { flex: none; font-size: 15px; }
.callrow .ad { font-size: 13px; color: var(--ink3); overflow-wrap: anywhere; }
.callrow.big { padding: 10px 12px 10px 16px; }
.callrow.big { background: linear-gradient(110deg, #fff 55%, var(--c-tile)); }

/* ---------- Для бизнеса ---------- */
.bizcard { border-radius: 28px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.bizcard .ic3 { width: 96px; height: 96px; }
.bizcard h2 { font-family: var(--font-d); font-size: 18px; font-weight: 600; }
.bizcard p { font-size: 14.5px; color: var(--ink2); max-width: 32ch; }
.bizcard .btn { flex: none; width: 100%; }

/* ---------- Главная: два компактных блока в ряд («Полезные телефоны», «Что доработать») и карточка установки ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.duo .tile { height: 104px; }
.duo .tile .ti { width: 48px; height: 48px; right: 0; top: -8px; }
.duo .tile .t { font-size: clamp(13px, 3.8vw, 15px); }
.duo .tile .s { font-size: 12px; }

.icard { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 14px 14px 14px 16px; border-radius: 24px; }
.icard .ii { width: 56px; height: 56px; grid-row: span 2; align-self: start; }
.icard .itx { padding-right: 30px; }
.icard h2 { font-family: var(--font-d); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.icard p { font-size: 13.5px; color: var(--ink2); margin-top: 2px; }
.icard .btn.sm { grid-column: 2; justify-self: start; flex: none; height: 40px; padding: 0 20px; font-size: 14px; border-radius: 20px; }
.icard .ix { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink3); }
#view.enter .icard { animation: pop var(--spring-t) var(--spring) backwards; animation-delay: 480ms; }

/* Шторка «Установить на экран» */
.ihead { display: flex; align-items: center; gap: 12px; padding: 2px 4px 0; }
.ihead .ic3 { width: 52px; height: 52px; }
.ihead h2 { padding: 0; font-size: 18px; }
.steps { display: flex; flex-direction: column; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 20px; background: #fff; box-shadow: var(--sh1); }
.steps .n { width: 26px; height: 26px; border-radius: 13px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.steps .sg { width: 44px; height: 44px; border-radius: 14px; background: var(--c-tile); color: var(--c-btn); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.steps .st { font-size: 15px; line-height: 1.35; min-width: 0; }
.steps .st b { font-weight: 700; }
.sheet-p { font-size: 15px; color: var(--ink2); padding: 0 4px; }
.sheet-note { font-size: 13px; color: var(--ink2); padding: 0 4px; line-height: 1.4; }
.panel .btn { flex: none; width: 100%; height: 52px; border-radius: 26px; }

/* ---------- Скоро в приложении ---------- */
.vcount { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; min-height: 52px; border-radius: 26px; color: var(--c-ink);
  background: #fff; box-shadow: 0 0 0 1px rgba(60, 40, 20, .06), 0 10px 22px -8px var(--c-sh); }
.vc-t { font-size: 15px; font-weight: 600; }
.vc-t b { font-family: var(--font-d); font-size: 19px; font-weight: 700; display: inline-block; min-width: .7em; text-align: center; font-variant-numeric: tabular-nums; }
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 14px; height: 14px; border-radius: 7px; background: var(--c-tile); box-shadow: inset 0 0 0 1.5px rgba(60, 40, 20, .1); transition: background-color .25s, transform var(--spring-t) var(--spring); }
.dots i.on { background: var(--c-btn); box-shadow: none; }
@keyframes bump { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
html:not(.lite) .vc-t b { animation: bump var(--spring-t) var(--spring); }
.vnote { padding: 0 6px; }
.vnote[hidden] { display: none; }
.vlist { display: flex; flex-direction: column; gap: 12px; }
.vcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 28px; min-width: 0; }
@supports (color: color-mix(in srgb, red, blue)) {
  .vcard { background: radial-gradient(70% 90% at 104% -6%, color-mix(in srgb, var(--c) 14%, transparent) 0%, transparent 70%), #fff; }
}
.vtop { display: flex; align-items: flex-start; gap: 14px; }
.vtop .vic { width: 56px; height: 56px; }
.vtx { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vtx h2 { font-family: var(--font-d); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.vtx p { font-size: 14px; color: var(--ink2); line-height: 1.35; }
.vbarrow { display: flex; align-items: center; gap: 12px; }
.bar { flex: 1; min-width: 0; height: 12px; border-radius: 6px; background: var(--c-tile); overflow: hidden; box-shadow: inset 0 1px 2px rgba(60, 40, 20, .1); }
.bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8B7CF8, var(--c-btn)); transition: width var(--spring-t) var(--spring); }
.vn { position: relative; min-width: 30px; text-align: right; font-family: var(--font-d); font-size: 16px; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
@keyframes barin { from { width: 0; } }
#view.enter .vcard { animation: rise .55s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
html:not(.lite) #view.enter .bar i { animation: barin 900ms var(--spring) backwards; animation-delay: calc(var(--i, 0) * 45ms + 250ms); }
html.lite .bar i { transition: none; }
.vbtn { position: relative; width: 100%; height: 48px; border-radius: 24px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--c-btn);
  box-shadow: inset 0 0 0 2px var(--c-btn); transition: transform var(--spring-t) var(--spring), background-color .2s, color .2s, box-shadow .2s; }
.vbtn:active { transform: scale(.97); transition-duration: 80ms, .2s, .2s, .2s; }
.vbtn.on { background: var(--c-btn); color: #fff; box-shadow: 0 8px 16px -6px var(--c-sh); }
.vbtn.out { background: var(--surf2); color: var(--ink2); box-shadow: none; }
@keyframes vpop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
html:not(.lite) .vbtn.pop { animation: vpop var(--spring-t) var(--spring); }
.sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.sparks i { position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: #FFD479; opacity: 0; animation: spark .8s cubic-bezier(.15, .7, .3, 1) var(--d, 0ms) forwards; }
.sparks i:nth-child(3n+2) { background: #fff; width: 8px; height: 8px; left: -4px; top: -4px; box-shadow: 0 0 0 1px rgba(91, 75, 233, .25); }
.sparks i:nth-child(3n) { background: #FF9C7C; }
@keyframes spark { 0% { transform: translate(0, 0) scale(.6); opacity: 1; } 55% { opacity: 1; transform: translate(calc(var(--dx) * .8), calc(var(--dy) * .8)) scale(1); } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }

/* ---------- «Нашли ошибку?» внизу карточки ---------- */
.reportrow { display: flex; justify-content: center; margin-top: 4px; }
.reportbtn { min-height: 44px; padding: 0 16px; border-radius: 22px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink3); text-decoration: underline; text-decoration-color: rgba(116, 107, 98, .4); text-underline-offset: 3px; }
@media (hover: hover) { .reportbtn:hover { color: var(--ink); } }

/* ---------- Скелетоны ---------- */
.sk { display: block; border-radius: 14px; background: linear-gradient(90deg, #E9E4D9 0%, #F6F3EC 50%, #E9E4D9 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Переходы между экранами ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(place-cover) { animation-duration: .45s; animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  ::view-transition-group(place-cover) { animation-duration: .42s; animation-timing-function: linear(0, .18, .42, .72, .95, 1.04, 1.02, 1); }
}
::view-transition-old(place-cover), ::view-transition-new(place-cover) { height: 100%; object-fit: cover; }
.vt-cover { view-transition-name: place-cover; }
::view-transition-group(nav) { animation-duration: 0s; }

/* ---------- Параллакс обложки (только где есть scroll-driven animations и не лёгкий режим) ---------- */
@keyframes hero-par { to { transform: translateY(44px) scale(1.06); } }
@keyframes hero-dim { to { opacity: .34; } }
@supports (animation-timeline: scroll()) {
  html:not(.lite) .pcover .cv { animation: hero-par linear both; animation-timeline: scroll(root block); animation-range: 0 320px; }
  html:not(.lite) .pcover::before { animation: hero-dim linear both; animation-timeline: scroll(root block); animation-range: 0 320px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html.lite *, html.lite *::before, html.lite *::after { scroll-behavior: auto; }
@media (hover: hover) {
  .btn:hover, .mini:hover, .rbtn:hover, .chip:not(.on):hover, .qa-b:hover .qa-c { filter: brightness(.96); }
}

@media (max-width: 374px) {
  .btn { font-size: 14px; }
  .rbtn { width: 44px; height: 44px; }
  .mini { padding: 0 11px; font-size: 13.5px; }
  .qa-b { width: 58px; }
  .qa-c { width: 54px; height: 54px; }
  .infot.addr { padding-right: 84px; }
}

/* ================= Погода в шапке главной (public/weather.js) =================
   Сцена `.scene-<вид>` (+ `.n` ночью) внутри `.sky`. Только transform и opacity.
   Переменные: --s1/--s2/--s3 небо сверху вниз, --h1/--h2 холмы (передний холм всегда цвета страницы),
   --c1..--c3 облака дальнего → ближнего слоя, --cs тень и --ch блик облаков. */
.hills .h1 { fill: var(--h1); opacity: .55; }
.hills .h2 { fill: var(--h2); opacity: .75; }
.hills .h3 { fill: var(--bg); }
.scene { --drop: rgba(246, 251, 255, .98); }

.scene-hot { --s1: #FFB98A; --s2: #FFD89C; --h1: #F4A56C; --h2: #F6BE82;
  background: radial-gradient(60% 55% at 82% 16%, #FFEBA8 0%, rgba(255, 235, 168, 0) 72%), radial-gradient(80% 50% at 0% 30%, rgba(255, 150, 110, .4) 0%, rgba(255, 150, 110, 0) 70%), var(--sky); }
.scene-clear { --s1: #FFE0BB; --s2: #FFF0D9; --h1: #F5C79A; --h2: #F6D9B4;
  background: radial-gradient(60% 50% at 82% 14%, #FFF1C2 0%, rgba(255, 241, 194, 0) 72%), var(--sky); }
.scene-partly { --s1: #BFDDEE; --s2: #F2EBDD; --h1: #E8C39B; --h2: #EDD3B5; --c1: #F1F6FA; --c2: #FFFFFF; --c3: #FFFFFF; --cs: #B4C8D8; --ch: #FFFFFF;
  background: radial-gradient(56% 46% at 80% 12%, #FFF4CF 0%, rgba(255, 244, 207, 0) 72%), var(--sky); }
.scene-cloudy { --s1: #A6B7C6; --s2: #C7D2DB; --h1: #B8C0C6; --h2: #D3D7D8; --c1: #DDE5EB; --c2: #EEF2F5; --c3: #FFFFFF; --cs: #7F93A6; --ch: #FFFFFF; }
.scene-fog { --s1: #C5CDD3; --s2: #DDE1E2; --h1: #CBD0D3; --h2: #DCDDDC; }
.scene-drizzle { --s1: #A3B7C9; --s2: #C4D2DD; --h1: #9FB0BD; --h2: #BFC9CF; --c1: #CAD6E0; --c2: #DDE6ED; --c3: #EDF2F6; --cs: #6F879C; --ch: #FFFFFF; }
.scene-rain { --s1: #8CA2B6; --s2: #B3C3D1; --h1: #8697A5; --h2: #A9B6BF; --c1: #B4C2CF; --c2: #9EAFBF; --c3: #8799AB; --cs: #4F6378; --ch: #D6E0E9; }
.scene-snow { --s1: #9FB4CC; --s2: #DCE6F0; --h1: #C3D1E0; --h2: #DCE6F0; --c1: #E6EEF6; --c2: #F5F9FC; --c3: #FFFFFF; --cs: #8CA3BD; --ch: #FFFFFF; }
.scene-frost { --s1: #B0DAF0; --s2: #DDF1FA; --h1: #BFDDEE; --h2: #D5EAF5;
  background: radial-gradient(56% 46% at 82% 12%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 72%), var(--sky); }
.scene-storm { --s1: #222838; --s2: #3B455A; --s3: #3B455A; --h1: #3A4252; --h2: #4A5365; --c1: #4D576C; --c2: #3C4559; --c3: #2C3447; --cs: #151A26; --ch: #6B7892; --drop: rgba(228, 238, 255, .98); }
.scene-night { --s1: #121842; --s2: #3A2F72; --s3: #4B3F86; --h1: #2A2A66; --h2: #3B3A7C;
  background: radial-gradient(52% 42% at 80% 14%, rgba(150, 130, 230, .45) 0%, rgba(150, 130, 230, 0) 70%), var(--sky); }
/* Ночные варианты: та же сцена, но темнее */
.scene.n { --drop: rgba(214, 228, 250, .98); }
.scene-cloudy.n { --s1: #232C3E; --s2: #38435A; --s3: #38435A; --h1: #2E3648; --h2: #3A4357; --c1: #4A566B; --c2: #3B465B; --c3: #2F394D; --cs: #141A27; --ch: #69768C; }
.scene-fog.n { --s1: #333A45; --s2: #474E59; --s3: #474E59; --h1: #3C434E; --h2: #4A515B; }
.scene-drizzle.n { --s1: #1F2B3F; --s2: #33445D; --s3: #33445D; --h1: #2A374B; --h2: #36455C; --c1: #475872; --c2: #3A4B64; --c3: #2D3C54; --cs: #121A28; --ch: #6A7C96; }
.scene-rain.n { --s1: #1A2436; --s2: #2B3A52; --s3: #2B3A52; --h1: #243044; --h2: #2F3E55; --c1: #3E4E66; --c2: #324259; --c3: #26344A; --cs: #0E1520; --ch: #5D6F89; }
.scene-snow.n { --s1: #25314E; --s2: #3B4B6C; --s3: #3B4B6C; --h1: #3E4E70; --h2: #55678A; --c1: #4F6086; --c2: #5C6E94; --c3: #6A7CA2; --cs: #1D2740; --ch: #8D9EC4; }
.scene-frost.n { --s1: #172E4C; --s2: #2B4C70; --s3: #2B4C70; --h1: #2B4A6B; --h2: #3F6286;
  background: radial-gradient(56% 46% at 82% 12%, rgba(150, 200, 255, .3) 0%, rgba(150, 200, 255, 0) 72%), var(--sky); }
.scene-storm.n { --s1: #161B28; --s2: #2A3242; --s3: #2A3242; --h1: #292F3D; --h2: #353D4E; --c1: #3A4356; --c2: #2D3546; --c3: #202636; --cs: #0B0E16; --ch: #55617A; }
.scene-snow .h2 { stroke: #fff; stroke-width: 1.6; stroke-opacity: .85; vector-effect: non-scaling-stroke; }

/* Читаемость: на светлых холодных сценах текст темнее, на тёмных — светлый (контраст ≥ 4.5:1, проверяет тест) */
.hello h1, .live { transition: color .6s ease; }
.screen[data-sky="cool"] .live { color: #1F2A36; }
.screen[data-sky="dark"] .hello h1 { color: #fff; text-shadow: 0 1px 10px rgba(8, 12, 30, .45); }
.screen[data-sky="dark"] .live { color: #E6EBF5; }
.screen[data-sky="dark"] .round.dark { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

/* Подпись погоды рядом со строкой «Сейчас открыто…» */
.live-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wx { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 8px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: #2F2620; background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px -6px rgba(60, 40, 20, .35); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .6s ease, background-color .6s ease; }
.wx[hidden] { display: none; }
.wx .wi { display: inline-block; font-size: 16px; line-height: 1; }
.screen[data-sky="cool"] .wx { color: #1F2A36; }
.screen[data-sky="dark"] .wx { color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
@keyframes w-chip { 0% { opacity: 0; transform: translateY(10px) scale(.86); } 60% { opacity: 1; transform: translateY(-2px) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes w-wi { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(8deg); } }
html:not(.lite) .wx:not([hidden]) { animation: w-chip .7s cubic-bezier(.22, 1, .36, 1) .1s both; }
html:not(.lite) .wx .wi { animation: w-wi 4.5s ease-in-out .8s infinite; }
@keyframes w-in { from { opacity: 0; } to { opacity: 1; } }
.scene.enter { animation: w-in .6s ease-in-out both; }

/* Солнце: пульсирующее свечение, медленно вращающиеся лучи, блики объектива, марево, пылинки света */
.sunbox { position: absolute; right: 8px; top: 24px; width: 190px; height: 190px; }
.sunbox > * { position: absolute; display: block; }
.sunbox .halo { inset: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 228, 140, .7) 0%, rgba(255, 200, 110, .32) 38%, rgba(255, 180, 90, 0) 68%); }
.sunbox .halo.h2 { inset: -26px; background: radial-gradient(circle, rgba(255, 244, 200, .85) 0%, rgba(255, 226, 140, 0) 70%); }
.sunbox .rays { left: -10px; top: -10px; width: 210px; height: 210px; fill: rgba(255, 238, 170, .78); }
.sunbox .rays.r2 { fill: rgba(255, 214, 140, .5); }
.sunbox .disc { left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFFBE6 0%, #FFE27A 42%, #FFB94A 78%, #FF9F3A 100%); box-shadow: 0 0 40px 12px rgba(255, 200, 90, .55); }
.sunbox.soft .halo { opacity: .65; }
.sunbox.soft .rays { opacity: .5; }
.sunbox.soft .disc { box-shadow: 0 0 28px 8px rgba(255, 214, 140, .4); }
.scene-partly .sunbox { right: 20px; top: 14px; }
@keyframes w-spin { to { transform: rotate(360deg); } }
@keyframes w-pulse { 0%, 100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes w-disc { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.sunbox .rays { animation: w-spin 90s linear infinite; }
.sunbox .rays.r2 { animation: w-spin 140s linear infinite reverse; }
.sunbox .halo { animation: w-pulse 6s ease-in-out infinite; }
.sunbox .halo.h2 { animation: w-pulse 4.5s ease-in-out -1.5s infinite; }
.sunbox .disc { animation: w-disc 5s ease-in-out infinite; }
.lf { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; animation: w-flare 6s ease-in-out var(--d) infinite; }
.lf.a { background: radial-gradient(circle, rgba(255, 236, 170, .38), rgba(255, 200, 120, .12) 60%, rgba(255, 200, 120, 0) 72%); box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .28); }
.lf.b { background: radial-gradient(circle, rgba(255, 170, 150, .36), rgba(255, 170, 150, 0) 70%); }
.lf.c { background: radial-gradient(circle, rgba(255, 255, 255, 0) 52%, rgba(255, 220, 160, .32) 62%, rgba(255, 220, 160, 0) 72%); }
@keyframes w-flare { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.hz { position: absolute; left: -5%; width: 110%; height: 46px; fill: rgba(255, 244, 214, .4); opacity: .5; animation: w-haze var(--t) ease-in-out var(--d) infinite; }
.hz path { animation: w-wave 5s ease-in-out infinite alternate; }
@keyframes w-haze { 0% { transform: translateY(26px) scaleY(.8); opacity: 0; } 35% { opacity: .75; } 100% { transform: translateY(-70px) scaleY(1.35); opacity: 0; } }
@keyframes w-wave { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
.mote { position: absolute; width: calc(var(--s) * 2.2); height: calc(var(--s) * 2.2); border-radius: 50%; background: radial-gradient(circle, #FFF6C8 0%, rgba(255, 236, 160, .5) 45%, rgba(255, 236, 160, 0) 72%); opacity: .8; animation: w-mote var(--t) ease-in-out var(--d) infinite; }
@keyframes w-mote { 0% { transform: translate(0, 20px); opacity: 0; } 20%, 80% { opacity: .9; } 100% { transform: translate(14px, -130px); opacity: 0; } }

/* Ночь: луна с дышащим свечением, мерцающие звёзды, редкая падающая звезда */
.moonbox { position: absolute; right: 34px; top: 40px; width: 72px; height: 72px; }
.mglow { position: absolute; inset: -46px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 200, .38) 0%, rgba(200, 190, 255, .14) 45%, rgba(200, 190, 255, 0) 70%); animation: w-pulse 7s ease-in-out infinite; }
.moon { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-18deg); fill: #FFF3D2; filter: drop-shadow(0 0 8px rgba(255, 236, 180, .7)); }
.star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #F4F6FF; opacity: var(--o); box-shadow: 0 0 4px rgba(255, 255, 255, .8); animation: w-twinkle var(--t) ease-in-out var(--d) infinite; }
.star.big { box-shadow: 0 0 7px 1px rgba(255, 255, 255, .9); }
@keyframes w-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.shoot { position: absolute; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); opacity: 0; transform: rotate(-28deg); animation: w-shoot var(--t) ease-in var(--d) infinite; }
@keyframes w-shoot { 0%, 90% { opacity: 0; transform: translate(0, 0) rotate(-28deg); } 91% { opacity: 1; } 100% { opacity: 0; transform: translate(-150px, 82px) rotate(-28deg); } }

/* Мороз: холодное сияние и искры инея */
.spk { position: absolute; width: var(--s); height: var(--s); opacity: .8;
  background: linear-gradient(#fff, #fff) center / 100% 1.5px no-repeat, linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat, radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 60%);
  animation: w-spark var(--t) ease-in-out var(--d) infinite; }
@keyframes w-spark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.sheen { position: absolute; top: 0; bottom: 40%; left: 30%; width: 60%; opacity: .5; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-12deg); animation: w-sheen 14s ease-in-out infinite; }
@keyframes w-sheen { 0%, 100% { transform: translateX(-70%) skewX(-12deg); opacity: 0; } 50% { transform: translateX(160%) skewX(-12deg); opacity: .8; } }

/* Кучевые облака: один силуэт с градиентом (макушка --ch → тело --cc → брюхо --cs); дальние слои размыты, слои дрейфуют с разной скоростью */
.cl { position: absolute; height: auto; overflow: visible; animation: w-drift var(--t) ease-in-out var(--d) infinite alternate; }
.cl .g0 { stop-color: var(--ch); }
.cl .g1 { stop-color: var(--cc); }
.cl .g2 { stop-color: var(--cs); }
.cl.l1 { --cc: var(--c1); opacity: .85; filter: blur(4px); }
.cl.l2 { --cc: var(--c2); opacity: .94; filter: blur(2px); }
.cl.l3 { --cc: var(--c3); filter: blur(.6px); }
/* тяжёлая пелена под потолком в дождь и грозу */
.scene-drizzle::before, .scene-rain::before, .scene-storm::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 130px; background: linear-gradient(180deg, var(--cs) 0%, rgba(0, 0, 0, 0) 100%); opacity: .35; }
.scene-rain::before { opacity: .5; }
.scene-storm::before { opacity: .8; }
@keyframes w-drift { from { transform: translateX(calc(var(--dx) * -1)); } to { transform: translateX(var(--dx)); } }

/* Туман и дымка: широкие мягкие полосы плывут навстречу друг другу */
.fg { position: absolute; left: -30%; width: 160%; height: var(--h); border-radius: 50%; opacity: var(--o); background: radial-gradient(closest-side, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0)); animation: w-fog var(--t) ease-in-out var(--d) infinite alternate; }
.fg.mist { opacity: calc(var(--o) * .55); }
.scene.n .fg { background: radial-gradient(closest-side, rgba(170, 182, 205, .5), rgba(170, 182, 205, 0)); }
@keyframes w-fog { from { transform: translateX(calc(var(--dx) * -1)); } to { transform: translateX(var(--dx)); } }

/* Дождь: капли трёх глубин, наклон по ветру (--tilt), брызги на холмах */
.fx { position: absolute; left: -16%; right: -16%; top: -12%; bottom: 0; transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0; }
.fx i { position: absolute; top: 0; width: 2px; box-shadow: 0 0 2px rgba(30, 60, 100, .6); height: var(--h); border-radius: 2px; opacity: var(--o); transform: translateY(var(--y)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--drop)); animation: w-fall var(--t) linear var(--d) infinite; }
.fx i.d1 { width: 1.4px; }
.fx i.d3 { width: 2.8px; }
.scene.n .fx i { box-shadow: none; }
@keyframes w-fall { from { transform: translateY(-50px); } to { transform: translateY(260px); } }
.sps { position: absolute; width: 16px; height: 5px; margin-left: -8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); opacity: .5; animation: w-splash var(--t) ease-out var(--d) infinite; }
@keyframes w-splash { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: .85; } 60%, 100% { opacity: 0; transform: scale(1.6); } }

/* Гроза: вспышка неба, свечение изнутри облаков и зигзаг молнии раз в 6 с */
.flash, .bgl, .bolt { position: absolute; opacity: 0; animation: w-flash 6s linear 1.5s infinite; }
.flash { inset: 0; background: radial-gradient(70% 55% at 62% 14%, rgba(255, 255, 255, .8), rgba(190, 208, 255, .3) 55%, rgba(190, 208, 255, 0) 80%); animation-name: w-flash-s; }
.bgl { width: 210px; height: 96px; background: radial-gradient(closest-side, rgba(214, 228, 255, .95), rgba(214, 228, 255, 0)); }
.bolt { left: 60%; top: 36px; width: 46px; height: 120px; fill: #FFF7CF; filter: drop-shadow(0 0 8px rgba(200, 220, 255, .9)); }
@keyframes w-flash { 0%, 86% { opacity: 0; } 87% { opacity: 1; } 88.5% { opacity: .15; } 90% { opacity: .85; } 95% { opacity: .1; } 100% { opacity: 0; } }
@keyframes w-flash-s { 0%, 86% { opacity: 0; } 87% { opacity: .55; } 88.5% { opacity: .1; } 90% { opacity: .4; } 95% { opacity: .06; } 100% { opacity: 0; } }

/* Снег: три слоя с параллаксом, дальний мягкий и мелкий, ближний крупный и качается шире */
.flakes { position: absolute; inset: 0; }
.flakes b { position: absolute; top: 0; transform: translateY(var(--y)); animation: w-snow var(--t) linear var(--d) infinite; }
.flakes i { display: block; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 3px 1px rgba(70, 110, 160, .45); animation: w-sway var(--st) ease-in-out var(--sd) infinite alternate; }
.flakes .f1 i { width: calc(var(--s) * 2); height: calc(var(--s) * 2); opacity: .8; background: radial-gradient(circle, #fff 25%, rgba(235, 244, 255, .55) 52%, rgba(235, 244, 255, 0) 74%); box-shadow: none; }
.flakes .f2 i { opacity: .92; }
.flakes .f3 i { box-shadow: 0 0 4px 1px rgba(60, 100, 155, .5); }
.scene.n .flakes i { box-shadow: 0 0 3px rgba(190, 210, 255, .5); }
@keyframes w-snow { from { transform: translateY(-24px); } to { transform: translateY(440px); } }
@keyframes w-sway { from { transform: translateX(calc(var(--sw) * -1)); } to { transform: translateX(var(--sw)); } }

/* Батарея и слабые телефоны: скрытая вкладка — пауза; лёгкий режим и «уменьшить движение» — статичная картинка (частиц меньше, разметка та же) */
html.tab-off *, html.tab-off *::before, html.tab-off *::after { animation-play-state: paused !important; }
html.lite .sky *, html.lite .sky *::before, html.lite .sky *::after { animation: none !important; transition: none !important; }
html.lite .bolt { opacity: .55; }
html.lite .bgl { opacity: .18; }
@media (prefers-reduced-motion: reduce) {
  .sky *, .sky *::before, .sky *::after { animation: none !important; transition: none !important; }
  .bolt { opacity: .55; }
  .bgl { opacity: .18; }
}

/* Иконки малых плиток разделов живут: лёгкое парение и покачивание (как у бургера в большой плитке) — transform, фаза по --i */
@keyframes ti-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes ti-sway { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(1px, -3px) rotate(3deg); } }
@keyframes ti-drift { 0%, 100% { transform: translate(-2px, 0) rotate(1.5deg); } 33% { transform: translate(2px, -3px) rotate(-2deg); } 66% { transform: translate(1px, -5px) rotate(2.5deg); } }
html:not(.lite) .bento > .tile:not(.hero) .ti { animation: ti-bob 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); will-change: transform; }
html:not(.lite) .bento > .tile:nth-child(3n + 3) .ti { animation-name: ti-sway; animation-duration: 6.2s; }
html:not(.lite) .bento > .tile:nth-child(3n + 4) .ti { animation-name: ti-drift; animation-duration: 6.8s; }
@media (prefers-reduced-motion: reduce) { .tile .ti { animation: none !important; will-change: auto; } }

/* Уведомления об акциях: колокольчик в карточке места, переключатели разделов */
.pushrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px 10px 14px; border-radius: 22px; background: var(--card); box-shadow: var(--sh1); text-align: left; }
.pushrow .ic3 { flex: none; width: 30px; height: 30px; }
.pushrow .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pushrow b { font-size: 15px; font-weight: 700; }
.pushrow small { font-size: 13px; line-height: 1.3; color: var(--ink2); }
.sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--chipline); transition: background .2s; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(60, 35, 10, .3); transition: transform .2s; }
[aria-pressed="true"] > .sw { background: var(--open); }
[aria-pressed="true"] > .sw::after { transform: translateX(18px); }
.pushopt { width: 100%; text-align: left; }
@media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition: none; } }
/* Умный поиск: подсказки при наборе, подсветка, сети, пояснения */
.chips.sug:empty { display: none; }
.chips.sug { margin-top: 8px; }
mark { background: rgba(15, 118, 110, .16); color: inherit; border-radius: 4px; padding: 0 1px; }
.snote { margin: 10px 4px 0; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.hist { margin-top: 14px; }
.hist .more { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.row.chain .chainbtn { text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.row.chain .chainbtn::after { content: '▾'; margin-left: 8px; color: var(--ink3); }
.row.chain .chainbtn[aria-expanded="true"]::after { content: '▴'; }
.chainlist { padding: 0 0 6px 54px; border-bottom: 1px solid var(--line); }
.chainlist .crow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; font-weight: 600; border-top: 1px solid var(--line); }
.chainlist .crow .st { font-size: 12.5px; color: var(--ink3); text-align: right; }
.chainlist .crow .st.open { color: #14703A; }

/* ---------- Стартовый экран (public/start.js) ---------- */
.startscr { position: fixed; inset: 0; z-index: 80; display: flex; overflow-y: auto; background: var(--bg); padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); }
.startscr[hidden] { display: none; }
.startbox { width: 100%; max-width: 480px; margin: auto; box-sizing: border-box; padding: 32px 20px 28px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.startbox > .ic3 { width: 96px; height: 96px; align-self: center; }
.startbox h1 { font-family: var(--font-d); font-size: 24px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.startbox h1:focus { outline: none; }
.stsub { font-size: 15px; color: var(--ink2); max-width: 34ch; align-self: center; line-height: 1.4; }
.stnote { font-size: 13px; color: var(--ink3); line-height: 1.4; }
.stbadge { align-self: center; padding: 6px 14px; border-radius: 14px; background: var(--surf2); font-size: 13.5px; font-weight: 700; color: var(--teal); }
.stbtn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 20px; border-radius: 24px; background: var(--card); box-shadow: var(--sh1); color: var(--ink); text-align: left; text-decoration: none; }
.stbtn b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.stbtn small { font-size: 13.5px; color: var(--ink2); line-height: 1.3; overflow-wrap: anywhere; }
.stbtn.main { background: var(--ink); color: var(--bg); }
.stbtn.main small { color: rgba(244, 241, 234, .75); }
.stbtn.center { align-items: center; text-align: center; }
.stbtn[aria-current="true"]:not(.main) { box-shadow: inset 0 0 0 2px var(--teal), var(--sh1); }
.stlink { align-self: center; min-height: 44px; padding: 0 18px; font-size: 14.5px; font-weight: 600; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.stlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.stlist li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--sh1); font-size: 15px; font-weight: 600; line-height: 1.35; }
.stlist .ico { flex: none; color: var(--teal); margin-top: 1px; }