/* Рабочие макеты «Интерфейс 2.0»: оболочка страницы и набор компонентов приложения
   Working mockups "Interface 2.0": page chrome and the app component kit */

/* ---------- Оболочка страницы / page chrome ---------- */
:root { --bg:#F6F7F9; --paper:#fff; --ink:#12151C; --muted:#5A6271; --line:#E2E5EA; --green:#0E9F6E; --green-ink:#08744F; --green-soft:#E7F6EF; --amber:#B45309; --amber-soft:#FEF3C7; --violet:#6D28D9; --violet-soft:#EDE9FE; --blue:#1D4ED8; --blue-soft:#E0EAFF; }
@media (prefers-color-scheme: dark) { :root { --bg:#0D1015; --paper:#151922; --ink:#E9ECF2; --muted:#A1A9B8; --line:#2A303B; --green:#34D399; --green-ink:#6EE7B7; --green-soft:#10281E; --amber:#FBBF24; --amber-soft:#2A2110; --violet:#C4B5FD; --violet-soft:#221A3A; --blue:#93B4FF; --blue-soft:#16213A; } }
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--ink); font:16px/1.55 Onest, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--green-ink); }
button { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--green); outline-offset:2px; border-radius:8px; }
.top { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top-in { max-width:1320px; margin:0 auto; padding:0 16px; display:flex; gap:12px; align-items:center; min-height:56px; flex-wrap:wrap; }
.logo { font-weight:800; font-size:20px; text-decoration:none; color:var(--ink); } .logo b { color:var(--green); }
.top nav { margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.top nav a { text-decoration:none; color:var(--muted); font-weight:600; font-size:14px; padding:8px 10px; border-radius:10px; min-height:44px; display:inline-flex; align-items:center; }
.top nav a[aria-current] { color:var(--green-ink); background:var(--green-soft); }

.stage { max-width:1320px; margin:0 auto; padding:16px; display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:1000px) { .stage { grid-template-columns:300px auto minmax(280px, 1fr); align-items:start; } }

/* Список сценариев / flow list */
.flows { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:12px; }
@media (min-width:1000px) { .flows { position:sticky; top:72px; max-height:calc(100vh - 88px); overflow:auto; } }
.flows h2 { font-size:15px; margin:4px 6px 8px; color:var(--muted); font-weight:700; }
.ph { margin:10px 0 2px; padding:6px; }
.ph b { display:block; font-size:14px; }
.ph small { color:var(--muted); font-size:12.5px; }
.fl { display:flex; gap:10px; align-items:center; width:100%; text-align:left; border:0; background:none; padding:9px 10px; border-radius:12px; cursor:pointer; min-height:44px; font-size:14.5px; }
.fl:hover { background:var(--bg); }
.fl[aria-current="true"] { background:var(--green-soft); color:var(--green-ink); font-weight:700; }
.fl .who { margin-left:auto; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--bg); color:var(--muted); white-space:nowrap; }
.fl .who.m { background:var(--amber-soft); color:var(--amber); } .fl .who.b { background:var(--violet-soft); color:var(--violet); }
.fl .new { font-size:10px; font-weight:800; color:var(--violet); }
.flows-toggle { display:none; }
@media (max-width:999px) {
  .flows { padding:8px; }
  .flows-toggle { display:flex; width:100%; justify-content:space-between; align-items:center; border:0; background:none; font-weight:700; min-height:44px; padding:6px 8px; cursor:pointer; }
  .flows:not(.open) .flows-list { display:none; }
}

/* Телефон / device */
.device-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
.device { position:relative; width:min(392px, calc(100vw - 32px)); height:min(812px, max(620px, calc(100vh - 150px))); border-radius:44px; background:#0F1218; padding:10px; box-shadow:0 20px 50px rgba(15,18,24,.25); }
.device::before { content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:96px; height:24px; border-radius:20px; background:#0F1218; z-index:5; }
.screen { position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:#F4F5F7; }
@media (max-width:440px) { .device { border-radius:30px; padding:6px; height:min(760px, calc(100vh - 120px)); } .screen { border-radius:25px; } .device::before { display:none; } }
.ctrl { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.ctrl button { min-height:44px; min-width:44px; padding:8px 14px; border-radius:12px; border:1px solid var(--line); background:var(--paper); cursor:pointer; font-weight:700; font-size:14px; }
.ctrl button:disabled { opacity:.4; cursor:default; }
.ctrl .dots { display:flex; gap:5px; } .ctrl .dots i { width:8px; height:8px; border-radius:50%; background:var(--line); } .ctrl .dots i.on { background:var(--green); width:20px; border-radius:6px; }

/* Пояснения / notes */
.notes { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:18px; }
@media (min-width:1000px) { .notes { position:sticky; top:72px; } }
.notes .kicker { font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--muted); text-transform:uppercase; }
.notes h1 { font-size:22px; line-height:1.2; margin:4px 0 6px; }
.notes .goal { color:var(--muted); font-size:14.5px; margin:0 0 12px; }
.notes h3 { font-size:15px; margin:14px 0 4px; }
.notes p { margin:4px 0; font-size:15px; }
.notes ul { margin:4px 0; padding-left:20px; font-size:15px; } .notes li { margin:3px 0; }
.notes .why { background:var(--green-soft); border-radius:12px; padding:10px 12px; font-size:14.5px; margin-top:10px; }
.notes .was { background:var(--amber-soft); border-radius:12px; padding:10px 12px; font-size:14.5px; margin-top:10px; }
.notes .tech { background:var(--blue-soft); border-radius:12px; padding:10px 12px; font-size:14px; margin-top:10px; }
.notes .opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.notes .opts button, .notes .opts label { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--bg); font-size:14px; font-weight:600; cursor:pointer; }
.notes .tag { display:inline-block; font-size:11.5px; font-weight:800; padding:2px 9px; border-radius:999px; margin-right:4px; }
.tag.ready { background:var(--green-soft); color:var(--green-ink); } .tag.next { background:var(--blue-soft); color:var(--blue); } .tag.new { background:var(--violet-soft); color:var(--violet); }

/* ---------- Приложение (всегда своя тема) / the app (own theme) ---------- */
.app { --bg:#F4F5F7; --card:#FFFFFF; --ink:#14171F; --mut:#5B6372; --line:#E3E6EB; --brand:#0B7A55; --brand-ink:#075E41; --soft:#E6F4EE; --warn:#92400E; --warn-soft:#FEF3C7; --err:#B42318; --err-soft:#FEE4E2; --info:#1D4ED8; --info-soft:#E8EEFF; --ad:#6B4E00; --ad-soft:#FFF4CC; --s:1;
  position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font:calc(15px * var(--s))/1.42 Onest, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
.app.big { --s:1.18; }
.app * { box-sizing:border-box; }
.app .sb { flex:none; height:40px; padding:12px 26px 0; display:flex; justify-content:space-between; font-size:13px; font-weight:700; background:var(--card); }
.app .sb.dark { background:var(--ink); color:#fff; }
.app .sb span:last-child { letter-spacing:2px; }
.app .main { flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; }
.app .main::-webkit-scrollbar { display:none; }
.app .pad { padding:14px 16px 24px; display:flex; flex-direction:column; gap:12px; }
.app h2 { font-size:calc(22px * var(--s)); line-height:1.2; margin:2px 0 0; letter-spacing:-.01em; }
.app h3 { font-size:calc(16px * var(--s)); margin:4px 0 0; }
.app p { margin:0; }
.app .mut { color:var(--mut); }
.app .sm { font-size:calc(13px * var(--s)); }
.app .row { display:flex; align-items:center; gap:10px; }
.app .between { justify-content:space-between; }
.app .grow { flex:1; min-width:0; }
.app .ic { width:calc(20px * var(--s)); height:calc(20px * var(--s)); flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app .ic.s { width:calc(16px * var(--s)); height:calc(16px * var(--s)); }
.app .ic.l { width:calc(28px * var(--s)); height:calc(28px * var(--s)); }

/* Шапки / bars */
.app .bar { flex:none; background:var(--card); border-bottom:1px solid var(--line); min-height:calc(54px * var(--s)); display:flex; align-items:center; gap:4px; padding:4px 8px; }
.app .bar .t { flex:1; min-width:0; font-weight:700; font-size:calc(17px * var(--s)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }
.app .bar .t small { display:block; font-weight:500; font-size:calc(12.5px * var(--s)); color:var(--mut); }
.app .ib { flex:none; width:calc(44px * var(--s)); height:calc(44px * var(--s)); border-radius:12px; border:0; background:none; display:grid; place-items:center; cursor:pointer; position:relative; color:var(--ink); }
.app .ib:active { background:var(--bg); }
.app .ib .badge { position:absolute; top:6px; right:6px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--err); color:#fff; font-size:10.5px; font-weight:800; display:grid; place-items:center; }
.app .home-top { flex:none; background:var(--card); padding:6px 16px 12px; display:flex; flex-direction:column; gap:10px; border-bottom:1px solid var(--line); }
.app .brand { font-weight:800; font-size:calc(20px * var(--s)); letter-spacing:-.01em; } .app .brand b { color:var(--brand); }
.app .city { display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:calc(14px * var(--s)); color:var(--mut); background:none; border:0; padding:6px 4px; cursor:pointer; min-height:36px; }
.app .search { display:flex; align-items:center; gap:10px; width:100%; min-height:calc(52px * var(--s)); border-radius:16px; border:1.5px solid var(--line); background:var(--bg); padding:0 8px 0 14px; color:var(--mut); font-size:calc(15.5px * var(--s)); cursor:pointer; text-align:left; }
.app .search .q { flex:1; color:var(--ink); }
.app .search .q.ph { color:var(--mut); }
.app .search .mic { width:calc(40px * var(--s)); height:calc(40px * var(--s)); border-radius:12px; background:var(--card); border:1px solid var(--line); display:grid; place-items:center; color:var(--brand); }

/* Нижнее меню / bottom nav */
.app .nav { flex:none; background:var(--card); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5, 1fr); padding:4px 4px 20px; }
.app .nav button { border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:calc(11px * var(--s)); font-weight:600; color:var(--mut); padding:6px 0; min-height:52px; cursor:pointer; position:relative; }
.app .nav button.on { color:var(--brand); }
.app .nav button.plus .ic { width:calc(44px * var(--s)); height:calc(44px * var(--s)); padding:10px; border-radius:16px; background:var(--brand); color:#fff; stroke-width:2.2; margin-top:-14px; box-shadow:0 6px 14px rgba(11,122,85,.35); }
.app .nav .badge { position:absolute; top:2px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--err); color:#fff; font-size:10.5px; font-weight:800; display:grid; place-items:center; }

/* Нижняя кнопка действия / sticky action */
.app .act { flex:none; background:var(--card); border-top:1px solid var(--line); padding:10px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.app .act .sum { display:flex; justify-content:space-between; font-size:calc(14px * var(--s)); }
.app .act .two { display:grid; grid-template-columns:auto 1fr; gap:8px; }

/* Кнопки / buttons */
.app .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:calc(50px * var(--s)); padding:8px 16px; border-radius:14px; border:1.5px solid transparent; font-weight:700; font-size:calc(15.5px * var(--s)); cursor:pointer; text-align:center; line-height:1.2; width:100%; }
.app .btn.p { background:var(--brand); color:#fff; }
.app .btn.p:active { background:var(--brand-ink); }
.app .btn.s { background:var(--card); border-color:#CBD1D9; color:var(--ink); }
.app .btn.g { background:var(--soft); color:var(--brand-ink); }
.app .btn.d { background:var(--card); border-color:#F3B4AE; color:var(--err); }
.app .btn.sber { background:#21A038; color:#fff; } .app .btn.vk { background:#0077FF; color:#fff; } .app .btn.ya { background:#1C1D21; color:#fff; } .app .btn.ya i { color:#FC3F1D; font-style:normal; font-weight:800; }
.app .btn.gu { background:#0D4CD3; color:#fff; }
.app .btn.auto { width:auto; }
.app .btn.sm { min-height:calc(40px * var(--s)); font-size:calc(14px * var(--s)); border-radius:12px; padding:6px 12px; }
.app .btn[disabled] { opacity:.45; cursor:default; }
.app .link { border:0; background:none; color:var(--brand-ink); font-weight:700; cursor:pointer; padding:8px 2px; font-size:inherit; min-height:40px; text-align:left; }

/* Карточки / cards */
.app .card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.app .card.tap { cursor:pointer; }
.app .card.tap:active { background:#FAFBFC; }
.app .card.hl { border-color:var(--brand); box-shadow:0 0 0 2px var(--soft); }
.app .pro { display:grid; grid-template-columns:calc(64px * var(--s)) 1fr; gap:12px; align-items:start; }
.app .pro .ph { width:calc(64px * var(--s)); height:calc(64px * var(--s)); border-radius:16px; overflow:hidden; background:var(--bg); position:relative; }
.app .pro .ph img, .app .thumb img, .app .hero img, .app .camf img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.app .nm { font-weight:700; font-size:calc(16px * var(--s)); line-height:1.25; }
.app .rt { display:inline-flex; align-items:center; gap:3px; font-weight:700; }
.app .rt .ic { color:#F5A524; fill:#F5A524; stroke:#F5A524; }
.app .price { font-weight:800; font-size:calc(17px * var(--s)); white-space:nowrap; }
.app .when { display:inline-flex; align-items:center; gap:5px; color:var(--brand-ink); font-weight:700; font-size:calc(14px * var(--s)); }
.app .when.later { color:var(--mut); font-weight:600; }
.app .trust { display:inline-flex; align-items:center; gap:5px; color:var(--mut); font-size:calc(13px * var(--s)); }
.app .trust .ic { color:var(--brand); }
.app .pill { display:inline-flex; align-items:center; gap:4px; font-size:calc(12px * var(--s)); font-weight:700; padding:3px 9px; border-radius:999px; background:var(--soft); color:var(--brand-ink); white-space:nowrap; }
.app .pill.warn { background:var(--warn-soft); color:var(--warn); } .app .pill.info { background:var(--info-soft); color:var(--info); } .app .pill.grey { background:var(--bg); color:var(--mut); } .app .pill.ad { background:var(--ad-soft); color:var(--ad); }
.app .thumb { position:relative; border-radius:14px; overflow:hidden; background:var(--bg); aspect-ratio:1; }
.app .hero { position:relative; aspect-ratio:4/3; background:var(--bg); flex:none; }
.app .hero .cnt { position:absolute; right:12px; bottom:12px; background:rgba(20,23,31,.72); color:#fff; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; }
.app .goods { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.app .gd { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; }
.app .gd .tx { padding:8px 10px 10px; display:flex; flex-direction:column; gap:2px; font-size:calc(13px * var(--s)); }

/* Списки, поля, чипы / lists, fields, chips */
.app .li { display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:calc(56px * var(--s)); background:var(--card); border-bottom:1px solid var(--line); cursor:pointer; }
.app .li:last-child { border-bottom:0; }
.app .group { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.app .li .ico { width:calc(38px * var(--s)); height:calc(38px * var(--s)); border-radius:12px; background:var(--soft); color:var(--brand); display:grid; place-items:center; flex:none; }
.app .chips { display:flex; gap:8px; flex-wrap:wrap; }
.app .chips.scroll { flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px; scrollbar-width:none; }
.app .chips.scroll::-webkit-scrollbar { display:none; }
.app .chip { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:calc(42px * var(--s)); padding:6px 14px; border-radius:999px; border:1.5px solid #CBD1D9; background:var(--card); font-weight:600; font-size:calc(14.5px * var(--s)); cursor:pointer; color:var(--ink); }
.app .chip.on { border-color:var(--brand); background:var(--soft); color:var(--brand-ink); }
.app .chip.off { opacity:.4; text-decoration:line-through; cursor:default; }
.app .lbl { font-weight:700; font-size:calc(14px * var(--s)); }
.app .inp { width:100%; min-height:calc(52px * var(--s)); border-radius:14px; border:1.5px solid #CBD1D9; background:var(--card); padding:10px 14px; font:inherit; font-size:calc(16px * var(--s)); color:var(--ink); }
.app .inp:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--soft); }
.app textarea.inp { min-height:calc(88px * var(--s)); resize:none; }
.app .hint { color:var(--mut); font-size:calc(13px * var(--s)); }
.app .code { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.app .code span { height:calc(60px * var(--s)); border-radius:14px; border:1.5px solid #CBD1D9; background:var(--card); display:grid; place-items:center; font-size:calc(26px * var(--s)); font-weight:800; }
.app .code span.on { border-color:var(--brand); box-shadow:0 0 0 3px var(--soft); }

/* Плитки категорий / category tiles */
.app .tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.app .tile { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px 6px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:calc(12.5px * var(--s)); font-weight:700; text-align:center; cursor:pointer; line-height:1.2; min-height:calc(84px * var(--s)); }
.app .tile .ti { width:calc(40px * var(--s)); height:calc(40px * var(--s)); border-radius:12px; display:grid; place-items:center; background:var(--soft); color:var(--brand); }

/* Плашки / callouts */
.app .note { border-radius:14px; padding:11px 12px; display:flex; gap:10px; align-items:flex-start; font-size:calc(14px * var(--s)); background:var(--soft); color:#0B3D2C; }
.app .note .ic { color:var(--brand); margin-top:1px; }
.app .note.warn { background:var(--warn-soft); color:#5B2C06; } .app .note.warn .ic { color:var(--warn); }
.app .note.err { background:var(--err-soft); color:#5C130C; } .app .note.err .ic { color:var(--err); }
.app .note.info { background:var(--info-soft); color:#13265C; } .app .note.info .ic { color:var(--info); }

/* «Деньги у банка» / escrow scheme */
.app .esc { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:4px; }
.app .esc div { background:var(--soft); border-radius:12px; padding:8px 4px; text-align:center; font-size:calc(11.5px * var(--s)); font-weight:700; color:var(--brand-ink); line-height:1.25; display:flex; flex-direction:column; align-items:center; gap:3px; }
.app .esc > .ic { color:var(--mut); width:14px; height:14px; }

/* Статус заказа / order timeline */
.app .tl { display:flex; flex-direction:column; }
.app .tl .st { display:grid; grid-template-columns:28px 1fr; gap:10px; position:relative; padding-bottom:14px; }
.app .tl .st:last-child { padding-bottom:0; }
.app .tl .st::before { content:""; position:absolute; left:13px; top:26px; bottom:0; width:2px; background:var(--line); }
.app .tl .st:last-child::before { display:none; }
.app .tl .dot { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:2px solid var(--line); color:var(--mut); z-index:1; }
.app .tl .st.done .dot { background:var(--brand); border-color:var(--brand); color:#fff; }
.app .tl .st.done::before { background:var(--brand); }
.app .tl .st.now .dot { border-color:var(--brand); color:var(--brand); background:var(--card); box-shadow:0 0 0 4px var(--soft); }
.app .tl .st b { display:block; font-size:calc(14.5px * var(--s)); }
.app .tl .st span { color:var(--mut); font-size:calc(13px * var(--s)); }

/* Живой статус / live status pill */
.app .live { background:var(--ink); color:#fff; border-radius:16px; padding:10px 12px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.app .live .lv { width:10px; height:10px; border-radius:50%; background:#34D399; box-shadow:0 0 0 4px rgba(52,211,153,.25); flex:none; animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(52,211,153,0); } }

/* Шторка, тост / sheet, toast */
.app .shade { position:absolute; inset:0; background:rgba(15,18,24,.45); z-index:30; display:flex; align-items:flex-end; }
.app .sheet { width:100%; background:var(--card); border-radius:22px 22px 0 0; padding:10px 16px 20px; display:flex; flex-direction:column; gap:12px; max-height:86%; overflow:auto; animation:up .22s ease-out; }
.app .sheet::before { content:""; align-self:center; width:40px; height:5px; border-radius:3px; background:var(--line); }
@keyframes up { from { transform:translateY(40px); opacity:.6; } }
.app .toast { position:absolute; left:16px; right:16px; bottom:96px; z-index:40; background:var(--ink); color:#fff; border-radius:14px; padding:12px 14px; font-weight:600; display:flex; gap:8px; align-items:center; animation:up .2s ease-out; }

/* Чат / chat */
.app .chat { display:flex; flex-direction:column; gap:8px; padding:14px 12px; }
.app .bub { max-width:82%; padding:9px 12px; border-radius:16px; font-size:calc(14.5px * var(--s)); }
.app .bub.in { background:var(--card); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:6px; }
.app .bub.out { background:#D9F1E5; align-self:flex-end; border-bottom-right-radius:6px; }
.app .bub small { display:block; color:var(--mut); font-size:11px; margin-top:2px; text-align:right; }
.app .bub.sys { align-self:center; background:none; color:var(--mut); font-size:12.5px; text-align:center; }
.app .compose { flex:none; background:var(--card); border-top:1px solid var(--line); padding:8px 10px 14px; display:flex; gap:8px; align-items:center; }
.app .compose .inp { min-height:44px; border-radius:22px; padding:8px 14px; }

/* Слоты времени / time slots */
.app .days { display:flex; gap:8px; overflow-x:auto; margin:0 -16px; padding:2px 16px 4px; scrollbar-width:none; }
.app .days::-webkit-scrollbar { display:none; }
.app .day { flex:none; width:calc(60px * var(--s)); padding:8px 0; border-radius:14px; border:1.5px solid #CBD1D9; background:var(--card); text-align:center; cursor:pointer; }
.app .day b { display:block; font-size:calc(18px * var(--s)); } .app .day span { font-size:calc(12px * var(--s)); color:var(--mut); font-weight:600; }
.app .day.on { border-color:var(--brand); background:var(--soft); color:var(--brand-ink); } .app .day.on span { color:var(--brand-ink); }
.app .day.off { opacity:.4; cursor:default; }
.app .slots { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.app .slot { min-height:calc(46px * var(--s)); border-radius:12px; border:1.5px solid #CBD1D9; background:var(--card); font-weight:700; cursor:pointer; font-size:calc(15px * var(--s)); }
.app .slot.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.app .part { font-weight:700; font-size:calc(13px * var(--s)); color:var(--mut); margin:6px 0 2px; }

/* Карта-схема / map scheme */
.app .map { position:relative; background:#E9EDE4; overflow:hidden; }
.app .map svg { position:absolute; inset:0; width:100%; height:100%; }
.app .pin { position:absolute; transform:translate(-50%, -100%); background:var(--card); border-radius:999px; padding:4px 9px; font-size:12px; font-weight:800; box-shadow:0 3px 10px rgba(0,0,0,.18); white-space:nowrap; display:flex; align-items:center; gap:4px; cursor:pointer; }
.app .pin.on { background:var(--brand); color:#fff; }
.app .pin::after { content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); border:5px solid transparent; border-top-color:inherit; border-top-color:var(--card); border-bottom:0; }
.app .pin.on::after { border-top-color:var(--brand); }

/* Прогресс шагов / step progress */
.app .steps { display:flex; gap:6px; } .app .steps i { flex:1; height:5px; border-radius:3px; background:var(--line); } .app .steps i.on { background:var(--brand); }
.app .meter { height:10px; border-radius:6px; background:var(--bg); overflow:hidden; border:1px solid var(--line); } .app .meter i { display:block; height:100%; background:var(--brand); border-radius:6px; }
.app .stars { display:flex; gap:6px; } .app .stars button { border:0; background:none; padding:2px; cursor:pointer; } .app .stars .ic { width:calc(38px * var(--s)); height:calc(38px * var(--s)); color:#D1D5DB; fill:#E5E7EB; stroke:#D1D5DB; } .app .stars .on .ic { color:#F5A524; fill:#F5A524; stroke:#F5A524; }
.app .kv { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:calc(14.5px * var(--s)); } .app .kv:last-child { border-bottom:0; } .app .kv span { color:var(--mut); } .app .kv b { text-align:right; }
.app .big-n { font-size:calc(30px * var(--s)); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.app .ai { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800; color:#6D28D9; background:#EDE9FE; border-radius:999px; padding:1px 7px; }
.app .center { text-align:center; align-items:center; }
.app .okc { width:calc(72px * var(--s)); height:calc(72px * var(--s)); border-radius:50%; background:var(--soft); color:var(--brand); display:grid; place-items:center; margin:8px auto 0; }
.app .okc .ic { width:36px; height:36px; stroke-width:2.4; }
.app .spin { width:44px; height:44px; border-radius:50%; border:4px solid var(--soft); border-top-color:var(--brand); animation:sp 1s linear infinite; margin:0 auto; }
@keyframes sp { to { transform:rotate(360deg); } }
.app .wave { display:flex; gap:5px; align-items:center; justify-content:center; height:60px; } .app .wave i { width:6px; border-radius:3px; background:var(--brand); animation:wv 1s ease-in-out infinite; } .app .wave i:nth-child(2n) { animation-delay:.2s; } .app .wave i:nth-child(3n) { animation-delay:.4s; }
@keyframes wv { 0%,100% { height:12px; } 50% { height:52px; } }
.app .qr { width:150px; height:150px; margin:4px auto; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; }

/* Подсказка «куда нажать» / where-to-tap hint */
.screen.hinting .app [data-go="next"], .screen.hinting .app .hot { outline:3px solid #F59E0B; outline-offset:2px; animation:hint .8s ease-in-out 3; }
@keyframes hint { 50% { outline-color:rgba(245,158,11,.2); } }
@media (prefers-reduced-motion: reduce) { .app *, .screen * { animation:none !important; } }
.notes .ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Встраивание в страницу плана (?embed=1): только телефон и стрелки / embed mode for the plan page: phone and arrows only */
body.embed { background:transparent; }
body.embed .top, body.embed .flows, body.embed .notes, body.embed .device-wrap > p { display:none; }
body.embed .stage { display:flex; justify-content:center; padding:4px 0; }
body.embed .device { height:740px; width:min(380px, calc(100vw - 8px)); }
body.embed .ctrl button { min-height:40px; }