:root { --bg:#F6F7F9; --paper:#fff; --ink:#12151C; --muted:#5A6271; --line:#E2E5EA; --green:#0E9F6E; --green-ink:#08744F; --green-soft:#E7F6EF; --amber:#B45309; --amber-soft:#FEF3C7; --red:#B42318; --red-soft:#FEE4E2; --blue:#1D4ED8; --blue-soft:#E0EAFF; --violet:#6D28D9; --violet-soft:#EDE9FE; }
@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; --red:#FDA29B; --red-soft:#3A1512; --blue:#93B4FF; --blue-soft:#16213A; --violet:#C4B5FD; --violet-soft:#221A3A; } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Onest, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--green-ink); overflow-wrap:anywhere; } a:focus-visible, summary:focus-visible { outline:3px solid var(--green); outline-offset:2px; border-radius:6px; }
.top { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top-in { max-width:1080px; 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); }
main { max-width:1080px; margin:0 auto; padding:24px 16px 80px; }
.who { color:var(--muted); font-size:14px; margin:0; }
h1 { font-size:clamp(28px, 4.6vw, 44px); line-height:1.1; margin:8px 0 12px; letter-spacing:-.02em; }
.lead { color:var(--muted); font-size:18px; max-width:820px; }
section { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:22px 18px; margin:16px 0; }
@media (min-width:720px) { section { padding:26px 30px; } }
h2 { font-size:clamp(21px, 3vw, 26px); margin:0 0 8px; scroll-margin-top:70px; line-height:1.25; }
h3 { font-size:17px; margin:20px 0 8px; }
p { margin:8px 0; }
.easy { background:var(--green-soft); border-radius:14px; padding:12px 14px; font-size:15px; margin:12px 0; }
.note { background:var(--amber-soft); border-radius:14px; padding:12px 14px; font-size:15px; margin:12px 0; } .note b { color:var(--amber); }
.fix { background:var(--blue-soft); border-radius:14px; padding:12px 14px; font-size:15px; margin:12px 0; } .fix b { color:var(--blue); }
.new { background:var(--violet-soft); border-radius:14px; padding:12px 14px; font-size:15px; margin:12px 0; } .new b { color:var(--violet); }
code, kbd { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:1px 5px; overflow-wrap:anywhere; }
dfn { font-style:normal; font-weight:700; }
.src { color:var(--muted); font-size:13px; }

/* Сводка / summary tiles */
.kpis { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); margin:16px 0; }
.kpi { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.kpi b { display:block; font-size:28px; line-height:1.1; letter-spacing:-.01em; }
.kpi span { color:var(--muted); font-size:14px; }
.kpi.ok b { color:var(--green-ink); } .kpi.wait b { color:var(--amber); }

/* Лента фаз / phase timeline */
.tl { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; }
.tl li { display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--bg); }
.tl .n { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:18px; color:#fff; background:var(--green); }
@media (prefers-color-scheme: dark) { .tl .n { color:#0D1015; } }
.tl a { font-weight:700; text-decoration:none; color:var(--ink); } .tl a:hover { text-decoration:underline; }
.tl small { display:block; color:var(--muted); font-size:14px; }
.tl .who-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.tag { font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.tag.you { background:var(--amber-soft); color:var(--amber); } .tag.me { background:var(--green-soft); color:var(--green-ink); } .tag.code { background:var(--violet-soft); color:var(--violet); } .tag.dep { background:var(--blue-soft); color:var(--blue); }

/* Готовность по фазам / readiness bars */
.bars { display:grid; gap:6px; margin:12px 0; }
.bar { display:grid; grid-template-columns:minmax(92px, 150px) 1fr 52px; gap:10px; align-items:center; font-size:14px; }
.bar .tr { height:14px; background:var(--bg); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.bar .tr i { display:block; height:100%; background:var(--green); border-radius:999px; }
.bar b { text-align:right; font-variant-numeric:tabular-nums; }

/* Фаза / phase */
.ph-head { display:flex; gap:14px; align-items:flex-start; }
.ph-num { flex:none; width:52px; height:52px; border-radius:14px; background:var(--green); color:#fff; font-weight:800; font-size:22px; display:grid; place-items:center; }
@media (prefers-color-scheme: dark) { .ph-num { color:#0D1015; } }
.ph-head h2 { margin:2px 0 4px; }
.meta { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 6px; } .meta span { background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:13px; color:var(--muted); }
.cols { display:grid; gap:12px; margin-top:12px; } @media (min-width:800px) { .cols { grid-template-columns:1fr 1fr; } }
.cols > * { min-width:0; }
.card { border:1px solid var(--line); border-radius:14px; padding:12px 14px; } .card h4 { margin:0 0 6px; font-size:15px; }
.card.you h4 { color:var(--amber); } .card.me h4 { color:var(--green-ink); }
.card ul { margin:0; padding-left:20px; } .card li { margin:5px 0; font-size:15px; }
.done-when { border-left:4px solid var(--green); background:var(--green-soft); border-radius:0 12px 12px 0; padding:10px 14px; margin:14px 0 0; font-size:15px; }
.done-when ul { margin:4px 0 0; padding-left:20px; }

/* Как работает: цепочка / flow chain */
.flow { list-style:none; padding:0; margin:10px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; counter-reset:f; }
.flow li { counter-increment:f; position:relative; flex:1 1 150px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px 10px 40px; font-size:14px; line-height:1.4; }
.flow li::before { content:counter(f); position:absolute; left:10px; top:10px; width:22px; height:22px; border-radius:50%; background:var(--green-soft); color:var(--green-ink); font-weight:800; font-size:12px; display:grid; place-items:center; }
.flow li b { display:block; }

/* Сейчас → будет / now vs after */
.vs { display:grid; gap:16px; margin-top:12px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); justify-items:center; }
.vs figure { margin:0; width:100%; max-width:270px; }
.vs figcaption { font-size:14px; color:var(--muted); margin-top:8px; line-height:1.45; }
.vs figcaption b { color:var(--ink); }
.lbl { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.02em; padding:2px 9px; border-radius:999px; margin-bottom:6px; }
.lbl.now { background:var(--amber-soft); color:var(--amber); } .lbl.after { background:var(--green-soft); color:var(--green-ink); } .lbl.built { background:var(--blue-soft); color:var(--blue); }

/* Рамка телефона: снимок / phone frame: screenshot */
.phone { position:relative; width:100%; aspect-ratio:9/16.5; border-radius:30px; border:8px solid #1B1F27; background:#F3F4F6; overflow:hidden; box-shadow:0 10px 30px rgba(18,21,28,.14); }
.phone > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
a.phone-link { display:block; text-decoration:none; }

/* Макет экрана (всегда светлый, как приложение) / screen mockup (always light, like the app) */
.mk { position:absolute; inset:0; display:flex; flex-direction:column; color:#12151C; font-size:12.5px; line-height:1.4; text-align:left; background:#F3F4F6; }
.mk .bar0 { background:#1B1F27; color:#fff; font-weight:700; font-size:11px; padding:6px 12px; display:flex; justify-content:space-between; gap:6px; }
.mk .bar0 em { font-style:normal; color:#86EFAC; font-weight:600; }
.mk .hdr { background:#fff; padding:8px 10px; display:flex; gap:6px; align-items:center; border-bottom:1px solid #E5E7EB; }
.mk .srch { flex:1; background:#EEF0F3; border-radius:999px; padding:6px 10px; color:#5A6271; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk .go { background:#08744F; color:#fff; border-radius:999px; padding:5px 10px; font-weight:700; font-size:11px; }
.mk .body { flex:1; padding:10px; overflow:hidden; display:flex; flex-direction:column; gap:8px; }
.mk h5 { margin:2px 0 0; font-size:17px; line-height:1.2; letter-spacing:-.01em; }
.mk .p { color:#5A6271; font-size:11.5px; }
.mk .box { background:#fff; border-radius:14px; padding:9px 10px; border:1px solid #E5E7EB; }
.mk .row { display:flex; justify-content:space-between; gap:8px; }
.mk .btn { border-radius:12px; padding:9px 10px; font-weight:700; text-align:center; font-size:12.5px; }
.mk .btn.g { background:#08744F; color:#fff; } .mk .btn.l { background:#fff; border:1px solid #D1D5DB; color:#12151C; }
.mk .btn.sber { background:#21A038; color:#fff; } .mk .btn.vk { background:#0077FF; color:#fff; } .mk .btn.ya { background:#12151C; color:#fff; } .mk .btn.ya i { color:#FC3F1D; font-style:normal; }
.mk .ok { background:#E7F6EF; color:#08744F; border-radius:10px; padding:7px 9px; font-size:11.5px; }
.mk .warn { background:#FEF3C7; color:#7C2D12; border-radius:10px; padding:7px 9px; font-size:11.5px; }
.mk .steps3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
.mk .steps3 div { background:#E7F6EF; border-radius:9px; padding:6px; font-size:10.5px; font-weight:700; color:#08744F; text-align:center; }
.mk .code { font-size:22px; font-weight:800; letter-spacing:.3em; text-align:center; background:#fff; border:1px solid #D1D5DB; border-radius:12px; padding:8px 0; }
.mk .mail { background:#fff; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.14); padding:8px 10px; font-size:11px; border:1px solid #E5E7EB; }
.mk .mail b { display:block; font-size:11.5px; }
.mk .tab { background:#fff; border-top:1px solid #E5E7EB; display:flex; justify-content:space-around; padding:6px 0 8px; font-size:9.5px; color:#5A6271; }
.mk .tab b { color:#08744F; }
.mk .bub { max-width:85%; border-radius:14px; padding:7px 9px; font-size:11.5px; }
.mk .bub.in { background:#fff; border:1px solid #E5E7EB; align-self:flex-start; }
.mk .bub.out { background:#DCF2E7; align-self:flex-end; }
.mk .bub .lnk { display:inline-block; margin-top:5px; background:#0077FF; color:#fff; border-radius:8px; padding:3px 8px; font-weight:700; font-size:11px; }
.mk .maxh { background:#fff; padding:8px 10px; display:flex; gap:8px; align-items:center; border-bottom:1px solid #E5E7EB; }
.mk .ava { width:28px; height:28px; border-radius:50%; background:#08744F; color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; flex:none; }
.mk .photo { position:relative; height:110px; border-radius:12px; overflow:hidden; background:#E5E7EB; }
.mk .photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mk .photo span { position:absolute; left:8px; bottom:8px; background:rgba(18,21,28,.78); color:#fff; border-radius:999px; padding:2px 8px; font-size:10.5px; font-weight:700; }
.mk .fld { display:flex; justify-content:space-between; gap:8px; border-bottom:1px dashed #E5E7EB; padding:3px 0; font-size:11.5px; }
.mk .fld:last-child { border-bottom:0; } .mk .fld span { color:#5A6271; } .mk .fld b { text-align:right; }
.mk .ai { font-size:10px; font-weight:800; color:#6D28D9; background:#EDE9FE; border-radius:999px; padding:1px 7px; }
.mk .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mk .pc { background:#fff; border:1px solid #E5E7EB; border-radius:12px; overflow:hidden; font-size:10.5px; }
.mk .pc .im { position:relative; height:64px; background:#E5E7EB; } .mk .pc .im img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mk .pc div.t { padding:5px 6px; } .mk .pc b { display:block; font-size:11px; }
.mk .chips { display:flex; gap:5px; flex-wrap:wrap; } .mk .chips span { background:#fff; border:1px solid #D1D5DB; border-radius:999px; padding:2px 8px; font-size:10.5px; }
.mk .chips span.on { background:#E7F6EF; border-color:#08744F; color:#08744F; font-weight:700; }
.mk .url { background:#fff; color:#5A6271; font-size:10.5px; text-align:center; padding:4px; border-bottom:1px solid #E5E7EB; }

/* Сводная таблица / master checklist */
.tw { overflow-x:auto; border:1px solid var(--line); border-radius:14px; margin:12px 0; }
table { border-collapse:collapse; width:100%; font-size:14px; } th, td { text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--line); }
th { background:var(--green-soft); position:sticky; top:0; } tr:last-child td { border-bottom:0; }
td.c { white-space:nowrap; text-align:center; }
.st { font-weight:700; font-size:12px; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.st.done { background:var(--green-soft); color:var(--green-ink); } .st.wait { background:var(--amber-soft); color:var(--amber); } .st.code { background:var(--violet-soft); color:var(--violet); } .st.ready { background:var(--blue-soft); color:var(--blue); }
.legend { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:13px; color:var(--muted); margin:6px 0; }
.toc { padding-left:20px; columns:1; } @media (min-width:720px) { .toc { columns:2; } } .toc li { margin:3px 0; break-inside:avoid; }

/* Единый план v2: ссылки на рабочие макеты, сопоставление планов / unified plan v2: mockup links, plan reconciliation */
.mk-links { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin:10px 0; }
.mkl { display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--bg); min-height:44px; }
.mkl:hover { border-color:var(--green); }
.mkl b { font-size:15px; } .mkl span { font-size:13.5px; color:var(--muted); line-height:1.4; }
.mkl i { font-style:normal; font-size:12px; font-weight:800; color:var(--green-ink); }
.mkl i.n { color:var(--violet); } .mkl i.x { color:var(--blue); }
.team { font-size:14px; color:var(--muted); margin-top:8px; }
.cta { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:10px 18px; border-radius:14px; background:var(--green); color:#fff; font-weight:700; text-decoration:none; }
@media (prefers-color-scheme: dark) { .cta { color:#0D1015; } }
.cta.s { background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.ctas { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px; }
.rules { counter-reset:r; list-style:none; padding:0; margin:10px 0; display:grid; gap:8px; }
@media (min-width:800px) { .rules { grid-template-columns:1fr 1fr; } }
.rules li { counter-increment:r; position:relative; padding:10px 12px 10px 44px; border:1px solid var(--line); border-radius:12px; background:var(--bg); font-size:15px; }
.rules li::before { content:counter(r); position:absolute; left:12px; top:10px; width:22px; height:22px; border-radius:50%; background:var(--green-soft); color:var(--green-ink); font-weight:800; font-size:12px; display:grid; place-items:center; }