/* Дизайн v6 (макеты design/v6: dizajn-27-raund-8, dizajn-28-vhod, dizajn-29-yadro, dizajn-30-profil; решения 161–181).
   Стили макетов как есть (классы r-, q-, s5–s8, m-, a-, c-, pz-, sh-, e-, t-, k-, n-, f-, l-, y-, p-, li-, sb-, tg-); ниже — только то,
   что меняется на телефоне: экран во всю ширину, небо под безопасной зоной сверху, нижняя панель и листы поверх страницы.
   Шрифты: Fira Sans Extra Condensed 500/700/800, Onest 400/500/600, JetBrains Mono 400/500 (свои файлы, папка fonts).
   Одна светлая тема: тёмной нет (задание «Перенос дизайна 27–30», п. 8). */
@font-face { font-family:'Fira Sans Extra Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/fira-xc-500-cyr.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Fira Sans Extra Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/fira-xc-500-lat.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:'Fira Sans Extra Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/fira-xc-700-cyr.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Fira Sans Extra Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/fira-xc-700-lat.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:'Fira Sans Extra Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url(fonts/fira-xc-800-cyr.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Fira Sans Extra Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url(fonts/fira-xc-800-lat.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:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jbmono-var-cyr.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jbmono-var-lat.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:'Onest'; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/onest-var-cyr.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:400 600; font-display:swap; src:url(fonts/onest-var-lat.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; }

*, *::before, *::after { box-sizing: border-box; }

/* общий каркас телефона */
.scr { width:390px; min-height:844px; position:relative; overflow:hidden; border-radius:32px; padding:20px 20px 104px; display:flex; flex-direction:column; gap:18px; }
.scr a { color:inherit; text-decoration:none; }
.ph { display:block; background-size:contain; background-repeat:no-repeat; background-position:center bottom; }
.uvbar { position:relative; flex:1; height:4px; border-radius:2px; background:linear-gradient(90deg,#5cbf6a 0%,#f2d43a 30%,#f39a2c 52%,#e0453a 72%,#9b4fd1 100%); min-width:60px; }
.uvbar i { position:absolute; top:50%; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); }
.tabs { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); padding:8px 8px 22px; }
.tab { display:grid; justify-items:center; gap:2px; min-height:48px; padding-top:4px; font-size:11px; letter-spacing:.02em; }

.r { --bg:#ffffff; --ink:#0d0b0b; --muted:#6f645d; --line:#e2d8d0; --pink:#df2a5b; --fit:#2b6e4f; --warn:#946c0a; --soft:#eef0f2; --tile:#f6f3f1;
  background:var(--bg); color:var(--ink); font-family:'Onest', system-ui, sans-serif; font-weight:400; }
.r-top { display:flex; justify-content:space-between; align-items:center; }
.r-word { font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:24px; letter-spacing:.02em; display:inline-flex; align-items:center; gap:6px; }
.r-ai { background:var(--pink); color:#fff; font-size:15px; padding:0 6px; border-radius:4px; line-height:22px; }
.r-me { width:44px; height:44px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#efe7e2; }
.r-me img { width:100%; height:100%; object-fit:cover; display:block; }
.r-me--tg { background:linear-gradient(160deg,#c9b8ad,#8f7d72); color:#fff; font-weight:500; font-size:18px; }
.r-eye { font-family:'JetBrains Mono', monospace; font-weight:500; font-size:12px; line-height:16px; letter-spacing:.04em; color:var(--muted); }

/* шапка Б: логотип и аватар первой строкой на небе */
.r-sky { position:relative; margin:-20px -20px 0; padding:20px 20px 16px; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.r-top--sky { position:relative; z-index:1; margin-bottom:10px; }
.r-sky__art { position:absolute; pointer-events:none; }
.r-sky__art svg { display:block; }
/* центр светила на 35px за правым краем (ширина неба 390), по вертикали на уровне имени (~107px) */
.r-sky--sun .r-sky__art { left:275px; top:-43px; }
.r-sky--night .r-sky__art { left:295px; top:-23px; }
.r-sky--partly .r-sky__art { left:213px; top:18px; }
.r-sky--cloud .r-sky__art { left:270px; top:40px; }
.r-sky--rain .r-sky__art { left:278px; top:36px; }
.r-hi { position:relative; margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:28px; line-height:30px; }
.r-sky .r-eye { position:relative; }
.r-sky__row { position:relative; display:flex; flex-wrap:nowrap; gap:6px; margin-top:10px; align-items:center; }
.r-chip, .r-wx { white-space:nowrap; padding:5px 10px; border-radius:999px; font-size:13px; line-height:18px; font-weight:500; color:#3b2b26; }
.r-chip { background:rgba(255,255,255,.72); }
.r-wx { display:inline-flex; align-items:center; gap:5px; background:none; padding:4px 10px; border:1px solid rgba(59,43,38,.4); }
.r-wx b { font-weight:600; }
.r-wx__ic { flex:none; }
.r-wx__dot { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; margin:0 2px; }
.r-sky--night { color:#f4ead8; }
.r-sky--night .r-chip { background:rgba(255,255,255,.12); color:#f4ead8; }
.r-sky--night .r-wx { color:#f4ead8; border-color:rgba(244,234,216,.4); }
.r-sky--night .r-word { color:#f4ead8; }
.r-sky--night .r-ai { background:#f4ead8; color:#1b2140; }

/* линия дня */
.r-day { display:flex; flex-direction:column; }
.r-node { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding-bottom:16px; }
.r-node::before { content:''; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--line); }
.r-node:last-child::before { display:none; }
.r-node__ic { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--soft); }
.r-node.on .r-node__ic { background:var(--pink); }
.r-node__body { display:flex; flex-direction:column; gap:8px; padding-top:4px; min-width:0; }
.r-node__head { display:flex; flex-direction:column; }
.r-h { margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:26px; line-height:28px; }
.r-list { list-style:none; margin:0; padding:12px; display:flex; flex-direction:column; gap:8px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.r-st { display:flex; align-items:center; gap:10px; min-height:44px; }
.r-st .ph { flex:none; width:40px; height:44px; }
.r-dot { flex:none; width:24px; height:24px; border-radius:50%; border:2px solid #cfc5bd; background:#fff; display:grid; place-items:center; color:#fff; }
.r-st.done .r-dot { background:var(--pink); border-color:var(--pink); }
.r-st.done .ph, .r-st.done .r-st__t { opacity:.6; }
.r-st.cur .r-dot { border-color:var(--pink); box-shadow:0 0 0 3px rgba(223,42,91,.18); }
.r-st__t { display:flex; flex-direction:column; min-width:0; }
.r-cat { font-weight:500; font-size:13px; line-height:17px; color:var(--muted); }
.r-pn { font-size:14px; line-height:19px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.r-st.cur .r-pn { font-weight:500; }
.r-done { margin:0; padding:10px 12px; border-radius:20px; background:#fff; border:1px solid var(--line); font-size:14px; color:var(--muted); }

/* действия */
.r-acts { display:grid; grid-template-columns:1.75fr 1fr; gap:10px; }
.r-acts--col { grid-template-columns:minmax(0,1fr); }
.r-cta { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 14px; border-radius:999px; background:var(--pink); color:#fff !important;
  font-weight:500; font-size:16px; line-height:20px; white-space:nowrap; }
.r-cta--line { background:transparent; color:var(--ink) !important; box-shadow:inset 0 0 0 1.5px var(--ink); }

/* популярное */
.r-sec { margin-top:4px; }
.r-h2 { margin:0; font-weight:500; font-size:18px; line-height:24px; }
.r-row { display:flex; gap:12px; overflow:hidden; margin-right:-20px; }
.r-card { position:relative; flex:none; width:148px; display:flex; flex-direction:column; gap:2px; }
.r-card .ph { height:160px; background-color:var(--tile); background-size:contain; background-position:center; background-origin:content-box; padding:14px; border-radius:20px; margin-bottom:6px; }
.r-rank { position:absolute; left:8px; top:8px; z-index:1; min-width:26px; height:26px; padding:0 7px; border-radius:9px; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px; }
.r-brand { font-weight:500; font-size:13px; line-height:17px; color:var(--muted); }
.r-v { font-weight:500; font-size:13px; line-height:18px; margin-top:2px; }
.r-v--fit { color:var(--fit); }
.r-v--warn { color:var(--warn); }
.r-num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.r-trust { margin:4px 0 0; font-size:12px; line-height:17px; color:var(--muted); text-align:center; text-wrap:balance; }

/* нижняя панель */
.r .tabs { background:var(--ink); color:#a7a0a0; }
.r .tab { font-family:'Onest', sans-serif; font-weight:500; font-size:11px; letter-spacing:0; }
.r .tab--on { color:#fff; }

/* выбор аватара */
.r-ptitle { display:flex; flex-direction:column; gap:2px; }
.r-h1 { margin:0; font-weight:500; font-size:26px; line-height:32px; }
.r-ava-now { display:grid; place-items:center; margin:2px 0 4px; }
.r-ava-now img { width:112px; height:112px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--pink); }
.r-ava-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.r-ava { aspect-ratio:1; min-height:44px; padding:0; border:0; border-radius:50%; overflow:hidden; background:#efe7e2; cursor:pointer; }
.r-ava img { width:100%; height:100%; object-fit:cover; display:block; }
.r-ava.on { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--pink); }

/* холст сдачи */

/* ===== дизайн 28: вход ===== */
.q { gap:16px; padding-bottom:28px; }
.q .r-top { min-height:44px; }
.q-top { display:flex; align-items:center; gap:12px; }
.q-back { flex:none; width:44px; height:44px; margin-left:-10px; display:grid; place-items:center; border-radius:50%; color:var(--ink); }
.q-prog { flex:1; display:flex; flex-direction:column; gap:6px; }
.q-bar { display:block; height:4px; border-radius:2px; background:#efe7e2; overflow:hidden; }
.q-bar i { display:block; height:100%; background:var(--ink); border-radius:2px; }
.q-head { display:flex; flex-direction:column; gap:6px; }
.q-h { margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:28px; line-height:31px; text-wrap:balance; }
.q-why { margin:0; font-size:15px; line-height:21px; color:var(--muted); }
.q-head .r-eye { margin-top:4px; }
.q-list { display:flex; flex-direction:column; gap:8px; }
.q-opt { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:14px 16px; text-align:left; font:inherit; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:20px; cursor:pointer; }
.q-opt.on { border-color:var(--pink); box-shadow:inset 0 0 0 1px var(--pink); }
.q-opt__t { flex:1; display:flex; flex-direction:column; gap:2px; font-size:16px; line-height:22px; }
.q-opt.on .q-opt__t > span:first-child { font-weight:500; }
.q-hint { font-size:13px; line-height:18px; color:var(--muted); font-weight:400; }
.q-mark { flex:none; width:24px; height:24px; border-radius:50%; border:2px solid #cfc5bd; display:grid; place-items:center; background:#fff; }
.q-mark--multi { border-radius:7px; }
.on > .q-mark { background:var(--pink); border-color:var(--pink); }
.q-or { display:flex; align-items:center; gap:10px; margin:4px 0; color:var(--muted); font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.04em; }
.q-or::before, .q-or::after { content:''; flex:1; height:1px; background:var(--line); }
.q-foot { position:sticky; bottom:0; z-index:2; margin:auto -20px -28px; padding:12px 20px 24px; display:flex; flex-direction:column; gap:4px; background:linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 16px); }
.q-foot .r-cta { width:100%; }
.r-cta--off { background:#efe7e2; color:#8a7f78 !important; }
.q-link { display:grid; place-items:center; min-height:44px; font-weight:500; font-size:15px; color:var(--ink); text-decoration:underline !important; text-underline-offset:3px; text-decoration-color:var(--line); }

/* 1. первый экран */
.q--intro { gap:20px; }
.q-hero { min-height:176px; justify-content:flex-start; }
.q-hero .r-top--sky { margin-bottom:22px; }
.i1 { display:flex; flex-direction:column; gap:14px; }
.i1-h { margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:36px; line-height:38px; text-wrap:balance; }
.i1-p { margin:0; font-size:16px; line-height:23px; color:#3b3330; }
.i1-row { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:4px 0; }
.i1-ph { aspect-ratio:3/4; border-radius:18px; background:var(--tile); padding:10px 8px; }
.i1-ph .ph { width:100%; height:100%; background-position:center; }
.i1-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.i1-list li { display:flex; align-items:center; gap:10px; font-size:14px; line-height:20px; color:var(--muted); }
.i1-list svg { flex:none; color:var(--ink); }

/* 3. карточки типа кожи */
.q-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.q-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:200px; padding:12px 14px 16px; text-align:left; font:inherit; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:20px; cursor:pointer; }
.q-card.on { border-color:var(--pink); box-shadow:inset 0 0 0 1px var(--pink); }
.q-card__art { align-self:center; width:100%; display:grid; place-items:center; height:108px; margin-bottom:6px; border-radius:14px; background:var(--tile); }
.q-card__t { font-size:16px; line-height:22px; font-weight:500; }
.q-card .q-mark { position:absolute; top:10px; right:10px; }

/* 4. ветка */
.q-branch { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:var(--tile); }
.q-branch__ic { flex:none; color:var(--muted); display:grid; }
.q-branch__t { flex:1; display:flex; flex-direction:column; min-width:0; }
.q-branch__k { font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.04em; color:var(--muted); }
.q-branch__v { font-size:14px; line-height:19px; font-weight:500; }
.q-branch__dots { flex:none; display:flex; gap:4px; }
.q-branch__dots i { width:10px; height:4px; border-radius:2px; background:#ded4cc; }
.q-branch__dots i.on { background:var(--ink); }
.q--branch .q-head { padding-left:14px; border-left:2px solid var(--line); }

/* 5. итог */
.s5-list { list-style:none; margin:0; padding:4px 16px; background:#fff; border:1px solid var(--line); border-radius:20px; }
.s5-row { display:flex; flex-direction:column; gap:2px; padding:12px 0; border-top:1px solid #efe7e2; }
.s5-row:first-child { border-top:0; }
.s5-k { font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.04em; color:var(--muted); }
.s5-v { font-size:16px; line-height:22px; }
.q-foot--two { gap:2px; }

/* 6. ожидание */
.q--wait .s6 { flex:1; display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.s6-h { text-align:center; }
.s6-list { list-style:none; margin:4px 0 0; padding:14px 16px; width:100%; display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--line); border-radius:20px; }
.s6-st { display:flex; align-items:center; gap:12px; font-size:15px; line-height:21px; }
.s6-dot { flex:none; width:24px; height:24px; border-radius:50%; border:2px solid #cfc5bd; display:grid; place-items:center; }
.s6-st--done .s6-dot { background:var(--ink); border-color:var(--ink); }
.s6-st--done { color:var(--muted); }
.s6-st--cur { font-weight:500; }
.s6-st--cur .s6-dot { border-color:var(--pink); box-shadow:0 0 0 3px rgba(223,42,91,.15); }
.s6-st--next { color:var(--muted); }
.s6-src { margin-top:2px; }

/* 6. ожидание (решения 172–173): небо по времени на телефоне */
.q--wait6 { height:844px; gap:0; padding-bottom:28px; overflow:hidden; }
.q--wait6 > * { position:relative; z-index:1; }
.q--wait6 > .s6-sky { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.s6-sky__stars { position:absolute; inset:0; }
.s6-sun { position:absolute; left:275px; top:-43px; }
.s6-sun--low { top:460px; }
.q--night { background:linear-gradient(180deg, #0d1418 0%, #121a30 45%, #1b2140 100%); color:#f4ead8; }
.q--dawn { background:linear-gradient(180deg, #c9b8e8 0%, #ffd9b8 100%); }
.q--day { background:linear-gradient(180deg, #cfe4ff 0%, #f3f8ff 100%); }
.q--night .r-word { color:#f4ead8; }
.q--night .r-ai { background:#f4ead8; color:#1b2140; }
.s6-h { margin-top:22px; }
.q--night .s6-h { color:#f4ead8; }
.s6-stage { position:relative; flex:1; display:grid; place-items:center; }
.m6 { grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; transition:opacity .4s ease; }
.m6.on { opacity:1; }
.m6__frame { width:260px; height:160px; display:grid; place-items:center; }
.m6__frame svg { display:block; overflow:visible; }
.q--night .m6__frame svg { filter:drop-shadow(0 0 6px rgba(244,234,216,.28)); }
.m6__name { height:16px; font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.04em; color:#4a403b; }
.q--night .m6__name { color:#b9b0a2; }
.m6 [data-bond] { transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1); }
.m6 path:not([data-bond]) { transition:opacity .3s ease; }
.m6.draw path:not([data-bond]) { opacity:0; }
.s6-foot { display:flex; flex-direction:column; align-items:center; gap:8px; }
.s6-status { position:relative; margin:0; width:100%; height:16px; font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.04em; text-align:center; color:#1c1a19; }
.q--night .s6-status { color:#f4ead8; }
.s6-st { position:absolute; left:0; right:0; top:0; display:block; text-align:center; opacity:0; transition:opacity .2s ease; }
.s6-st.on { opacity:1; }
.q--dawn .r-trust, .q--day .r-trust { color:#4a403b; }
.q--night .r-trust { color:#b9b0a2; }
.r-num[data-count-to] { display:inline-block; text-align:right; }
@media (prefers-reduced-motion: reduce) { .m6, .s6-st, .m6 [data-bond], .m6 path { transition:none !important; } }

/* 7. результат (решение 174): формула одной строкой плашек */
.s7-f6 { display:flex; flex-direction:column; gap:6px; margin-bottom:-4px; }
.s7-lbl { margin:0; font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.04em; color:var(--muted); }
.s7-row { display:flex; align-items:center; gap:4px; margin-right:-6px; }
.s7-chips { flex:1; min-width:0; list-style:none; margin:0; padding:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.s7-chips::-webkit-scrollbar { display:none; }
.s7-chip { flex:none; scroll-snap-align:start; background:var(--tile); }
.s7-more { flex:none; display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:0 6px; font-weight:500; font-size:15px; color:var(--ink); }
.s8-top { gap:6px; }
.s8-h { font-size:28px; }
.s8-list { display:flex; flex-direction:column; gap:12px; }
.s8-card { display:flex; flex-direction:column; gap:10px; padding:16px; background:#fff; border:1px solid var(--line); border-radius:20px; }
.s8-card__h { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; margin:-10px 0 -6px; }
.q--result .r-trust { margin-bottom:12px; }
.s8-card__k { font-weight:600; font-size:17px; line-height:22px; }
.s8-card__p { font-size:15px; line-height:22px; color:#3b3330; }
.s8-card__in { font-weight:500; font-size:14px; line-height:20px; }
.s8-card__why { margin-top:-6px; font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.02em; color:var(--muted); }
.s8-card__src { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding-top:10px; border-top:1px solid #efe7e2; }
.s8-card__src .r-eye { width:100%; }
.s8-src { display:inline-flex; align-items:center; min-height:32px; font-size:14px; color:var(--ink) !important; text-decoration:underline !important; text-underline-offset:3px; text-decoration-color:var(--line); }
.s8-src--plain { text-decoration:none !important; color:var(--muted) !important; }
.s6c { display:block; max-width:none; margin:0 auto; }
.s6-bleed { margin:0 -20px; overflow:hidden; }
.s6c text { font:500 11px/14px 'JetBrains Mono', monospace; fill:#6f645d; letter-spacing:.02em; stroke:#ffffff; stroke-width:4px; stroke-linejoin:round; paint-order:stroke; }
.q--wait .s6 { justify-content:flex-start; padding-bottom:0; gap:12px; }

/* ===== дизайн 29: ядро ===== */
.m { gap:18px; }
.m-h1 { text-transform:none; }
.m--fix { height:844px; min-height:844px; }
.m-scroll { display:flex; flex-direction:column; gap:18px; }
.m-list { list-style:none; margin:0; padding:0; border-radius:20px; background:#fff; border:1px solid var(--line); overflow:hidden; }
.m-step { padding:12px 0 12px 12px; display:flex; flex-direction:column; gap:8px; }
.m-step + .m-step { border-top:1px solid #efe7e2; }
.m-step .r-st { padding-right:12px; }
.r-st.paused .ph, .r-st.paused .r-st__t { opacity:.55; }
.r-dot--pz { border-color:#cfc5bd; background:#f6f3f1; }
.a-row { display:flex; flex-direction:column; gap:6px; }
.a-eye { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; min-height:32px; margin:-6px 0 -6px 34px; padding:0 8px 0 0; border:0; background:none; cursor:pointer; text-align:left; }
.a-car { display:inline-grid; transition:transform .2s ease; }
.m-step.open .a-car { transform:rotate(90deg); }
.a-scroll[hidden] { display:none; }
.a-scroll { list-style:none; margin:0; padding:0 12px 2px 0; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
.a-scroll::-webkit-scrollbar { display:none; }
.a-card { flex:none; width:112px; scroll-snap-align:start; }
.a-link { display:flex; flex-direction:column; gap:1px; }
.a-ph { position:relative; display:block; height:84px; border-radius:14px; background:var(--tile); margin-bottom:6px; }
.a-ph .ph { position:absolute; inset:8px; background-position:center; }
.a-card--in .a-ph { box-shadow:inset 0 0 0 1.5px var(--ink); }
.a-tag, .c-in { position:absolute; left:6px; top:6px; padding:2px 7px; border-radius:999px; background:var(--ink); color:#fff; font-weight:500; font-size:11px; line-height:14px; }
.a-b { font-weight:500; font-size:12px; line-height:16px; color:var(--muted); }
.a-n { font-size:13px; line-height:17px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.a-v { font-weight:500; font-size:12px; line-height:16px; margin-top:2px; }
.a-v.r-v--fit, .c-v.r-v--fit { color:var(--fit); } .a-v.r-v--warn, .c-v.r-v--warn { color:var(--warn); }
.a-none { margin:-4px 12px 0 34px; }
.ph--none { display:grid; place-items:center; background:none; }
.a-ph .ph--none { position:absolute; inset:0; }
.m-new { width:100%; gap:8px; }

/* лист снизу */
.sh-dim { position:absolute; inset:0; background:rgba(13,11,11,.42); z-index:5; }
.sh { position:absolute; left:0; right:0; bottom:0; z-index:6; padding:10px 20px 28px; background:#fff; border-radius:28px 28px 0 0; display:flex; flex-direction:column; gap:12px; }
.sh-grab { align-self:center; width:40px; height:4px; border-radius:2px; background:#d9cfc8; margin-bottom:6px; }
.sh-h { margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:26px; line-height:29px; }
.sh-p { margin:0; font-size:16px; line-height:23px; color:#3b3330; }
.sh-btns { display:flex; flex-direction:column; gap:10px; margin-top:6px; }

/* 4. без анкеты */
.e-head { display:flex; flex-direction:column; gap:4px; }
.e-h { margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:28px; line-height:31px; }
.e-paths { display:flex; flex-direction:column; gap:10px; }
.e-path { display:flex; align-items:center; gap:14px; min-height:44px; padding:16px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.e-path--main { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.e-ic { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--pink); }
.e-ic--line { background:var(--soft); }
.e-t { flex:1; display:flex; flex-direction:column; gap:3px; }
.e-t b { font-weight:600; font-size:17px; line-height:22px; }
.e-t span { font-size:14px; line-height:20px; color:var(--muted); }
.m-ghosts { margin-top:4px; }
.m-ghost .r-node__ic { background:var(--soft); opacity:.7; }
.m-ghost .r-h { color:#b3a9a2; }

/* карточка средства */
.c { padding-bottom:28px; gap:16px; }
.c-top { display:flex; align-items:center; gap:4px; margin-left:-10px; }
.c-top .r-word { font-size:20px; }
.c-top .r-ai { font-size:13px; line-height:19px; }
.c-hero { position:relative; height:248px; border-radius:24px; background:var(--tile); padding:20px; }
.c-hero .ph { width:100%; height:100%; background-position:center; }
.c-hero--sm { height:150px; padding:14px; }
.c-id { display:flex; flex-direction:column; gap:2px; }
.c-name { margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:28px; line-height:31px; text-wrap:balance; }
.c-st { display:flex; align-items:center; gap:10px; margin-top:6px; }
.c-v { font-weight:600; font-size:15px; line-height:20px; display:inline-flex; align-items:center; gap:6px; }
.c-v::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; }
.c-st .c-in { position:static; }
.c-seg { display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px; background:var(--soft); }
.c-seg__i { display:grid; place-items:center; min-height:44px; border-radius:999px; font-weight:500; font-size:15px; color:var(--muted); }
.c-seg__i.on { background:var(--ink); color:#fff; }
.c-sec { display:flex; flex-direction:column; gap:10px; }
.c-sec__h { display:flex; align-items:baseline; justify-content:space-between; }
.c-grp { margin-bottom:-4px; }
.c-subs { list-style:none; margin:0; padding:0 14px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.c-subs li + li { border-top:1px solid #efe7e2; }
.c-sub { display:flex; align-items:center; gap:10px; min-height:52px; padding:6px 0; }
.c-sub__n { flex:1; font-size:15px; line-height:20px; }
.c-sub__r { font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.02em; color:var(--muted); }
.c-sub--p { min-height:64px; }
.c-sub__ph { flex:none; position:relative; width:44px; height:52px; border-radius:12px; background:var(--tile); }
.c-sub__ph .ph { position:absolute; inset:4px; background-position:center; }
.c-sub__tt { flex:1; display:flex; flex-direction:column; min-width:0; }
.c-more { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; font-weight:500; font-size:15px; }
.c-mini { display:flex; gap:12px; align-items:center; padding:12px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.c-mini__ph { flex:none; position:relative; width:64px; height:76px; border-radius:14px; background:var(--tile); }
.c-mini__ph .ph { position:absolute; inset:6px; background-position:center; }
.c-mini__t { display:flex; flex-direction:column; gap:1px; min-width:0; }
.c-sim { margin-right:-20px; padding-right:20px; }
.c-buy { display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 16px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.c-buy__ic { flex:none; width:40px; height:40px; border-radius:50%; background:var(--soft); display:grid; place-items:center; }
.c-buy__t { flex:1; display:flex; flex-direction:column; gap:1px; }
.c-buy__t b { font-weight:600; font-size:16px; line-height:21px; }
.c-trust { margin-top:0; }
.c-verd { display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.c-verd__w { font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:40px; line-height:42px; }
.c-verd--fit .c-verd__w { color:var(--fit); }
.c-verd--warn .c-verd__w { color:var(--warn); }
.c-verd__p { margin:0; font-size:15px; line-height:22px; color:#3b3330; }
.c-args { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.c-arg { position:relative; display:flex; flex-direction:column; gap:2px; padding:12px 14px 12px 40px; border-radius:16px; background:#fff; border:1px solid var(--line); font-size:15px; line-height:21px; }
.c-arg::before { position:absolute; left:14px; top:12px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font:600 14px/18px 'Onest'; }
.c-args--plus .c-arg::before { content:'+'; background:#e6f0eb; color:var(--fit); }
.c-args--risk .c-arg::before { content:'!'; background:#f6eedb; color:var(--warn); }
.c-arg__k { font-weight:600; }
/* why_lines базы (данные дизайна 27–30): подпись источника строки «Почему это средство» */
.c-arg__src { display:block; margin-top:2px; font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.02em; color:var(--muted); }
.s8-card__whysrc { display:block; margin-top:2px; opacity:.85; }
.c-srcs { gap:6px; }
.c-srcs__l { display:flex; flex-wrap:wrap; gap:4px 16px; }
.s8-src { display:inline-flex; align-items:center; min-height:32px; font-size:14px; color:var(--ink) !important; text-decoration:underline !important; text-underline-offset:3px; text-decoration-color:var(--line); }
.c-act .r-cta { width:100%; }

/* 7. пауза */
.pz { display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:20px; background:#f6f3f1; }
.pz-h { display:flex; gap:12px; align-items:flex-start; }
.pz-ic { flex:none; width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; }
.pz-t { margin:0; font-weight:600; font-size:17px; line-height:22px; }
.pz-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#fff; }
.pz-item .ph { flex:none; width:40px; height:44px; opacity:.6; }
.pz-item .r-st__t { flex:1; }
.pz-tag { flex:none; font:500 12px/16px 'JetBrains Mono', monospace; color:var(--muted); padding:3px 8px; border-radius:999px; border:1px solid #d9cfc8; }
.pz-why { margin:0; font-size:15px; line-height:22px; }
.pz-inst { margin:0; padding-top:10px; border-top:1px solid #e7ddd6; font-size:15px; line-height:22px; color:#3b3330; }
.pz-src { margin:0; font-size:14px; line-height:20px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }

/* 8. лист вещества */
.m--sheet { min-height:844px; }
.m--sheet .c-hero--sm { margin-bottom:0; }
.sh--full { position:relative; z-index:6; margin:-40px -20px -28px; flex:1; padding-bottom:32px; gap:16px; }
.sh-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.sh-x { flex:none; width:44px; height:44px; margin:-6px -10px 0 0; display:grid; place-items:center; border-radius:50%; }
.sh-para { margin:0; font-size:16px; line-height:24px; color:#2a2421; }


/* ===== дизайн 30: проверка, поиск, профиль и служебные экраны ===== */
.t { gap:16px; padding-bottom:28px; }
.t.k, .t.p, .t.shelf, .t.y, .t.pr, .t.li { padding-bottom:104px; }
.h-top { gap:8px; }
.h-top .r-word { font-size:20px; }
.h-top .r-ai { font-size:13px; line-height:19px; }
.h-t { display:flex; flex-direction:column; }
.h-h { font-size:24px; line-height:28px; }
.q-head--row { flex-direction:row; align-items:center; justify-content:space-between; }
.h-add { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 14px; border-radius:999px; background:var(--pink); color:#fff !important; font-weight:500; font-size:15px; }
.h-add svg { color:#fff; }

/* 1. проверить */
.k-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.k-tile { display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:124px; padding:14px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.k-tile--main { background:var(--ink); border-color:var(--ink); color:#fff; }
.scr .k-tile--main { background:var(--ink); border-color:var(--ink); color:#fff; }
.k-tile__t { font-weight:600; font-size:17px; line-height:22px; }
.k-how { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 16px 16px; border-radius:20px; background:var(--tile); }
.k-how__art svg { display:block; }
.k-how__t { display:flex; flex-direction:column; gap:4px; text-align:center; }
.k-how__t b { font-weight:600; font-size:15px; line-height:20px; }
.k-how__t span { font-size:14px; line-height:20px; color:var(--muted); }
.k-find { padding:12px 16px; }
.k-left { text-align:center; margin-top:-4px; }

/* 3. не распознали */
.n .q-head { gap:8px; }
.n-why { color:var(--ink); font-size:16px; line-height:23px; }
.n-shot { height:200px; display:grid; place-items:center; border-radius:20px; background:var(--tile); border:1.5px dashed #d9cfc8; overflow:hidden; }
.n-shot__art { display:block; opacity:.9; }
.n-hint { margin:0; font-size:15px; line-height:22px; color:var(--muted); }

/* 1б. камера */
.scr.cam { height:844px; padding:0; gap:0; background:#0d0b0b; color:#fff; }
.cam-scene { position:absolute; inset:0; background:radial-gradient(120% 70% at 50% 45%, #5a4d45 0%, #2c2420 55%, #120f0e 100%); }
.cam-scene::after { content:''; position:absolute; left:0; right:0; top:58%; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.35) 100%); }
.cam-ph { position:absolute; left:115px; top:236px; width:160px; height:270px; transform:rotate(-6deg); filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.cam-ph .ph { width:100%; height:100%; background-position:center; }
.cam-frame { position:absolute; left:55px; top:222px; }
.cam-frame svg { display:block; }
.cam-top { position:absolute; left:10px; right:10px; top:14px; display:flex; }
.cam-x { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.35); }
.cam-cap { position:absolute; left:20px; right:20px; top:162px; margin:0; text-align:center; font-weight:500; font-size:17px; line-height:22px; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.cam-bar { position:absolute; left:0; right:0; bottom:0; height:168px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 28px 22px; background:linear-gradient(180deg, rgba(13,11,11,0) 0, rgba(13,11,11,.85) 40%); }
.cam-btn { justify-self:center; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:64px; min-height:64px; justify-content:center; }
.cam-btn span { font:500 12px/16px 'JetBrains Mono', monospace; letter-spacing:.04em; color:#e9e2dc; }
.cam-shot { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 4px #fff; }
.cam-shot i { width:60px; height:60px; border-radius:50%; background:#fff; }

/* 1г. нет в каталоге */
.g-name { display:flex; flex-direction:column; gap:6px; }
.g-field { min-height:48px; font-size:15px; }
.g-field .f-x { width:44px; height:44px; margin-right:-12px; }
.n-shot--solid { border-style:solid; border-color:transparent; height:176px; }
.g-small { margin:6px 0 0; text-align:center; font-size:13px; line-height:18px; color:var(--muted); text-wrap:balance; }

/* 4. найти */
.f-field { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 16px; border-radius:999px; background:var(--tile); color:var(--muted); font-size:16px; }
.f-field > svg:first-child { flex:none; color:var(--ink); }
.f-val { flex:1; color:var(--ink); }
.f-ph { flex:1; }
.f-x { flex:none; display:grid; place-items:center; width:32px; height:32px; margin-right:-8px; }
.f-clear { text-decoration:underline !important; text-underline-offset:3px; text-decoration-color:var(--line); }
.l-list { list-style:none; margin:0; padding:0 14px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.l-list li + li { border-top:1px solid #efe7e2; }
.l-row { display:flex; align-items:center; gap:12px; min-height:72px; padding:10px 0; }
.l-ph { flex:none; position:relative; width:48px; height:56px; border-radius:12px; background:var(--tile); }
.l-ph .ph { position:absolute; inset:4px; background-position:center; }
.l-ph .ph--none { inset:0; }
.l-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.l-n { font-size:15px; line-height:20px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.l-s { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.l-v { font-weight:500; font-size:13px; line-height:18px; margin:0; }
.l-in { padding:2px 7px; border-radius:999px; background:var(--ink); color:#fff; font-weight:500; font-size:11px; line-height:14px; }
.n-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 20px 24px; text-align:center; border-radius:20px; background:#fff; border:1px solid var(--line); }
.n-empty--top { padding-top:24px; }
.n-empty__ic { width:56px; height:56px; border-radius:50%; background:var(--tile); display:grid; place-items:center; margin-bottom:4px; }
.n-empty__h { margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:26px; line-height:28px; text-wrap:balance; }
.n-empty__p { margin:0; font-size:15px; line-height:21px; color:#3b3330; text-wrap:balance; }
.n-empty .r-cta { width:100%; margin-top:8px; }
.n-empty__p--sm { font-size:14px; line-height:20px; color:var(--muted); }

/* 7. ваша кожа */
.y-ava { display:flex; flex-direction:column; align-items:center; gap:8px; margin:2px 0 -2px; }
.y-ava img { width:112px; height:112px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--pink); }
.y-ava__btn { display:inline-flex; align-items:center; gap:4px; min-height:36px; padding:0 12px; border-radius:999px; font-weight:500; font-size:14px; box-shadow:inset 0 0 0 1.5px var(--ink); }
.y-list .s5-row { flex-direction:row; align-items:center; gap:12px; }
.y-row { display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 0; border-top:1px solid #efe7e2; }
.y-list li:first-child .y-row { border-top:0; }
.y-t { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.y-edit { flex:none; display:inline-flex; align-items:center; gap:2px; font-weight:500; font-size:14px; color:var(--muted); }
.y-recalc { text-align:center; padding:6px 0; }

/* 8. профиль */
.p-me { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.p-me img { width:96px; height:96px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--pink); margin-bottom:6px; }
.p-name { font-size:30px; line-height:32px; }
.p-free { margin:0; font-weight:500; font-size:14px; line-height:20px; color:var(--ink); }
.p-menu { list-style:none; margin:0; padding:0 14px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.p-menu li + li { border-top:1px solid #efe7e2; }
.p-row { display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 0; }
.p-ic { flex:none; width:40px; height:40px; border-radius:50%; background:var(--tile); display:grid; place-items:center; color:var(--ink); }
.p-t { flex:1; display:flex; flex-direction:column; min-width:0; }
.p-l { font-size:16px; line-height:21px; }
.p-v { font-size:13px; line-height:17px; color:var(--muted); }
.p-foot { margin-top:auto; }

/* 9. лимит */
.li-head { display:flex; flex-direction:column; gap:6px; }
.li-num { font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:96px; line-height:84px; color:var(--ink); letter-spacing:-.01em; }
.li-h { font-size:32px; line-height:34px; }
.li-list { list-style:none; margin:0; padding:4px 14px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.li-row { display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 0; font-size:15px; line-height:21px; }
.li-row + .li-row { border-top:1px solid #efe7e2; }
.li-ic { flex:none; width:36px; height:36px; border-radius:50%; background:var(--tile); display:grid; place-items:center; color:var(--ink); }
.li .q-foot { margin-bottom:-4px; background:none; }

/* 10. подписка */
.sb-h { font-size:36px; line-height:38px; }
.sb-row { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.sb-ph { position:relative; aspect-ratio:3/4; border-radius:16px; background:var(--tile); padding:8px 6px; }
.sb-ph .ph { width:100%; height:100%; background-position:center; }
.sb-ok { position:absolute; right:-4px; top:-4px; width:22px; height:22px; border-radius:50%; background:var(--fit); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 2px #fff; }
.sb-perks li { align-items:flex-start; color:var(--ink); font-size:15px; line-height:21px; }
.sb-perks svg { margin-top:2px; }
.sb-plans { display:flex; flex-direction:column; gap:8px; }
.pl { display:flex; align-items:center; gap:12px; min-height:60px; padding:12px 16px; border-radius:20px; background:#fff; border:1px solid var(--line); cursor:pointer; }
.pl.on { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.pl-mark { flex:none; width:24px; height:24px; border-radius:50%; border:2px solid #cfc5bd; display:grid; place-items:center; background:#fff; }
.pl.on .pl-mark { background:var(--pink); border-color:var(--pink); }
.pl-t { flex:1; display:flex; align-items:center; gap:8px; font-size:16px; line-height:22px; }
.pl-t b { font-weight:600; }
.pl-rec { padding:2px 8px; border-radius:999px; background:var(--pink); color:#fff; font-weight:500; font-size:12px; line-height:16px; }
.pl-p { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.pl-p b { font:500 14px/18px 'JetBrains Mono', monospace; letter-spacing:.02em; }
.sb-cancel { margin:0; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:20px; background:var(--tile); font-weight:600; font-size:15px; line-height:20px; }
.sb-cancel__ic { flex:none; width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; }
.sb-terms { padding:12px 16px; }

/* 11. уведомления: Telegram */
.tg { width:390px; border-radius:32px; overflow:hidden; background:#e9edf2; color:#0d0b0b; font-family:'Onest', system-ui, sans-serif; }
.tg-top { display:flex; align-items:center; gap:10px; padding:16px 14px 12px; background:#fff; border-bottom:1px solid #e2e6ea; }
.tg-name { flex:1; display:flex; flex-direction:column; }
.tg-name b { font-weight:600; font-size:16px; line-height:20px; }
.tg-name span { font-size:12px; line-height:16px; color:#6f645d; }
.tg-logo, .tg-ava { flex:none; width:36px; height:36px; border-radius:50%; background:var(--pink, #df2a5b); color:#fff; display:grid; place-items:center; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:800; font-size:14px; }
.tg-chat { display:flex; flex-direction:column; gap:6px; padding:14px 12px 20px; }
.tg-day { display:flex; justify-content:center; margin:10px 0 4px; }
.tg-day span { padding:3px 10px; border-radius:999px; background:rgba(13,11,11,.1); font-size:12px; line-height:16px; color:#3b3330; }
.tg-msg { display:flex; align-items:flex-end; gap:8px; }
.tg-ava { width:32px; height:32px; font-size:12px; }
.tg-b { position:relative; max-width:290px; padding:8px 12px 18px; border-radius:18px 18px 18px 6px; background:#fff; }
.tg-b p { margin:0; font-size:15px; line-height:21px; }
.tg-time { position:absolute; right:10px; bottom:5px; font-size:11px; line-height:14px; color:#8a7f78; }
.tg-btn { margin:0 0 0 40px; max-width:290px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.7); text-align:center; font-weight:500; font-size:14px; line-height:18px; color:#1c6ec0; }


/* ===== приложение: экран телефона вместо холста макета ===== */
:root { --sf-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --sf-bottom: env(safe-area-inset-bottom, 0px); color-scheme: light; }
html { background:#ffffff; }
/* экран v6 — во всю ширину: у прежнего контейнера отступы и ширина 560 только для прежних экранов */
.приложение:has(> main.scr), .приложение:has(> .scr) { max-width:none; padding:0; }
body.r { margin:0; min-height:100vh; font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
/* сбросы приложения — в :where() (специфичность 0): стили макета всегда сильнее (починка-1 по аудиту 27–30, п. 4) */
:where(body.r button) { font-family:inherit; }
.scr { width:100%; max-width:520px; margin:0 auto; min-height:100vh; min-height:100dvh; border-radius:0; overflow:visible; overflow-x:clip;
  padding:calc(20px + var(--sf-top)) 20px calc(104px + var(--sf-bottom)); }
.scr.q, .scr.c, .scr.t, .scr.n { padding-bottom:calc(28px + var(--sf-bottom)); }
.scr.t.k, .scr.t.p, .scr.t.shelf, .scr.t.y, .scr.t.pr, .scr.t.li, .scr.m, .scr.r-home { padding-bottom:calc(104px + var(--sf-bottom)); }
/* небо тянется под полосу Telegram и вырез экрана */
.r-sky { margin:calc(-20px - var(--sf-top)) -20px 0; padding-top:calc(20px + var(--sf-top)); }
.q--wait6 { height:100vh; height:100dvh; min-height:0; }
.q--wait6 > .s6-sky { border-radius:0; }
.s6-sky__stars { width:100%; height:100%; }
.s6-sun { left:auto; right:-185px; }
.s6-sun--low { top:auto; bottom:84px; }
.m--fix { height:auto; min-height:100vh; min-height:100dvh; }
.m--sheet { min-height:100vh; min-height:100dvh; }
/* нижняя панель: поверх страницы, над нижней безопасной зоной */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:20; max-width:520px; margin:0 auto; padding:8px 8px calc(22px + var(--sf-bottom)); }
:where(.tabs .tab) { border:0; background:none; color:inherit; cursor:pointer; text-decoration:none; }
/* листы снизу: поверх экрана */
.sh-dim { position:fixed; z-index:30; }
.sh { position:fixed; z-index:31; max-width:520px; margin:0 auto; padding-bottom:calc(28px + var(--sf-bottom)); }
.sh--full { position:fixed; inset:auto 0 0 0; margin:0 auto; max-height:88vh; max-height:88dvh; overflow-y:auto; }
/* кнопки и ссылки-кнопки разметки макета */
:where(button.r-cta, button.q-link, button.a-eye, button.c-seg__i, button.c-more, button.s7-more, button.q-back, button.sh-x, button.f-x, button.h-add, button.y-ava__btn,
button.e-path, button.k-tile, button.p-row, button.l-row, button.c-buy, button.y-row, button.s8-card__h, button.r-dot, button.tab, button.pl, button.r-ava, button.f-clear) {
  font:inherit; color:inherit; border:0; background:none; cursor:pointer; text-align:inherit; -webkit-tap-highlight-color:transparent; }
:where(button.q-link, button.e-path, button.k-tile, button.c-buy, button.p-row, button.l-row, button.y-row) { width:100%; }
:where(button.e-path, button.k-tile, button.c-buy, button.p-row, button.l-row, button.y-row) { text-align:left; }
:where(button.r-dot) { padding:0; }
.r-st { position:relative; }
.r-st__open { display:flex; align-items:center; gap:10px; flex:1; min-width:0; min-height:44px; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.ph { flex:none; }
.ph--img { background-size:contain; background-repeat:no-repeat; background-position:center bottom; }
.ph--none { color:#cfc5bd; }
.r-me { flex:none; }
.r-me--tg { font-family:'Onest', system-ui, sans-serif; }
.r-word { color:inherit; }
/* плейсхолдер текста базы, пока ключа нет в экспорте (п. 7 задания): ключ в фигурных скобках, как в макетах */
.sf-key { font-family:'JetBrains Mono', monospace; font-weight:500; font-size:.86em; letter-spacing:.02em; color:var(--muted); overflow-wrap:anywhere; }
.r-ptitle .r-h1 { font-family:'Onest', system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .a-car, .c-seg__i { transition:none !important; } }

/* ── Служебные экраны без макета 27–30 (загрузка, ошибка загрузки, уточнение города, лимит прежнего вида, «Как мы оцениваем»):
   шрифты и цвета v6 вместо стилей v4/v5 (сняты) */
.sf-v6, .main { font-family:'Onest', system-ui, sans-serif; color:#0d0b0b; }
.main { display:flex; flex-direction:column; gap:12px; padding:calc(20px + env(safe-area-inset-top, 0px)) 20px 24px; max-width:520px; margin:0 auto; box-sizing:border-box; }
.h1v4 { margin:0; font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:700; font-size:30px; line-height:32px; letter-spacing:0; }
.sec-note { margin:0; font-size:15px; line-height:22px; color:#6f645d; }
.sf-v6 .sf-limit { border:1px solid #e2d8d0; border-radius:20px; background:#fff; padding:16px; display:flex; flex-direction:column; gap:10px; }
.sf-v6 .sf-limit__text { margin:0; font-size:15px; line-height:22px; }
/* «Как мы оцениваем» из «Профиля» (решение 188): карточка v6 */
.sf-v6 .sf-card { border:1px solid #e2d8d0; border-radius:20px; background:#fff; padding:16px; }
.sf-v6 .sf-card__text { margin:0; font-size:15px; line-height:22px; color:#0d0b0b; white-space:pre-line; }
.sf-v6 .sf-link { color:#df2a5b; font-weight:600; text-decoration:none; }
.загрузка { padding:30vh 20px 0; text-align:center; font-family:'Onest', system-ui, sans-serif; color:#0d0b0b; }
.загрузка h2 { font-family:'Fira Sans Extra Condensed', sans-serif; font-weight:700; font-size:26px; line-height:28px; margin:0 0 8px; }
.загрузка p { margin:0 0 8px; font-size:15px; line-height:22px; }
.загрузка .второстепенно { color:#6f645d; font-size:13px; }
.загрузка .кнопка-повтора { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border:0; border-radius:999px;
  background:#df2a5b; color:#fff; font:600 16px/20px 'Onest', system-ui, sans-serif; width:auto; margin:8px 0; }
/* Группы разбора полки и карточки прежних экранов: белые на белом, отделены линией макета (карточки v6: линия #e2d8d0, радиус 20px) */
.rv-sec { border:1px solid #e2d8d0; }
/* камера «Проверить» (дизайн 30.2, экран 1б): во весь экран телефона, живое видео вместо фото макета, кадр и подпись по центру */
.scr.cam { position:fixed; inset:0; z-index:40; width:100%; max-width:none; height:100vh; height:100dvh; min-height:0; overflow:hidden; }
.cam-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cam-scene::after { z-index:1; }
.cam-frame { left:50%; top:calc(44% - 150px); margin-left:-140px; z-index:2; }
.cam-top { top:calc(14px + var(--sf-top)); z-index:3; }
.cam-cap { top:calc(44% - 210px); z-index:3; }
.cam-bar { padding-bottom:calc(22px + var(--sf-bottom)); z-index:3; }
:where(button.cam-x, button.cam-btn, button.cam-shot) { border:0; padding:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.cam-btn[data-off] { opacity:.45; }