/* ══════════════════════════════════════════════════════════════════════ Сомелье — дизайн v5 «машина показывает работу», по макетам v5_screen_1…6 и variant_5_machine_shows_work. Кладётся ПОСЛЕ app.css и включается атрибутом на : Снять атрибут — вернётся прежний вид. Экраны, которые макеты перестраивают, v5 рисует своей разметкой (.v5only в index.html и ветки V5() в app.js); прежние блоки помечены .v4only. Три правила языка: 1. Моноширинный набор — только посчитанное и проверяемое: счётчики, цены в справке, оси, веса, проценты, время. Всё, что сказано человеку, — обычным шрифтом. Засечек нет: имена вин — тем же гротеском. 2. Чёрный блок ровно один на экран и всегда означает «здесь система приняла решение»: съёмка на главной, вопрос онбординга, весь экран обработки, первая карточка результата, шапка «Моего вкуса». 3. Экраны — не россыпь карточек, а одна поверхность с секциями через волосяную линию; чёрная полоса идёт от края до края. Каждое правило ниже начинается с html[data-skin="v5"] — это проверяет тест. ══════════════════════════════════════════════════════════════════════ */ /* ── Токены: светлая ────────────────────────────────────────────────── */ html[data-skin="v5"]{ --bg:#F5F4EF; --surf:#FFFFFF; --surf2:#F1EFE8; --surf3:#E6E3DB; --ink:#1F1E1D; --ink2:#5F5E5A; --ink3:#888780; --line:#E4E2DC; --line2:#CBC8C0; --accent:#993556; --accent-ink:#FFFFFF; --accent-bg:#F7EAF0; /* основное действие — чёрное, как «Беру это» на макете; акцент — только полосы */ --accent-fill:#141312; --accent-fill-ink:#F1EFE8; --block:#141312; --block-ink:#F1EFE8; --block-ink2:#B4B2A9; --block-ink3:#888780; --block-line:#444441; --block-soft:#242220; /* совпадение — близость к профилю, не оценка вина: плотность, а не светофор */ --m-lo-bg:#F1EFE8; --m-lo:#888780; --m-mid-bg:#E6E3DB; --m-mid:#5F5E5A; --m-hi-bg:#D8D4CA; --m-hi:#1F1E1D; --gold:#854F0B; --gold-bg:#FAEEDA; --go:#3B6D11; --go-bg:#EAF3DE; --ok:#3B6D11; --info:#185FA5; --info-bg:#E6F1FB; --tick-ok:#97C459; --tick-run:#EF9F27; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --serif:var(--sans); --shadow:none; --r:14px; --r-s:12px; --padx:18px; } /* ── Токены: тёмная — чёрный блок решения переворачивается в светлый ── */ @media (prefers-color-scheme:dark){ html[data-skin="v5"]:not([data-theme="light"]){ --bg:#0E0D0C; --surf:#1A1917; --surf2:#252320; --surf3:#302E2A; --ink:#F1EFE8; --ink2:#B4B2A9; --ink3:#888780; --line:#2E2C29; --line2:#46443F; --accent:#D4537E; --accent-ink:#141312; --accent-bg:#3A1A26; --accent-fill:#F1EFE8; --accent-fill-ink:#141312; --block:#F1EFE8; --block-ink:#141312; --block-ink2:#5F5E5A; --block-ink3:#7B7A74; --block-line:#CBC8C0; --block-soft:#E4E1D9; --m-lo-bg:#252320; --m-lo:#888780; --m-mid-bg:#302E2A; --m-mid:#B4B2A9; --m-hi-bg:#46443F; --m-hi:#F1EFE8; --gold:#EF9F27; --gold-bg:#3A2A10; --go:#97C459; --go-bg:#1F3312; --ok:#97C459; --info:#85B7EB; --info-bg:#0F2A44; --tick-ok:#3B6D11; --tick-run:#B26B00; } } html[data-skin="v5"][data-theme="dark"]{ --bg:#0E0D0C; --surf:#1A1917; --surf2:#252320; --surf3:#302E2A; --ink:#F1EFE8; --ink2:#B4B2A9; --ink3:#888780; --line:#2E2C29; --line2:#46443F; --accent:#D4537E; --accent-ink:#141312; --accent-bg:#3A1A26; --accent-fill:#F1EFE8; --accent-fill-ink:#141312; --block:#F1EFE8; --block-ink:#141312; --block-ink2:#5F5E5A; --block-ink3:#7B7A74; --block-line:#CBC8C0; --block-soft:#E4E1D9; --m-lo-bg:#252320; --m-lo:#888780; --m-mid-bg:#302E2A; --m-mid:#B4B2A9; --m-hi-bg:#46443F; --m-hi:#F1EFE8; --gold:#EF9F27; --gold-bg:#3A2A10; --go:#97C459; --go-bg:#1F3312; --ok:#97C459; --info:#85B7EB; --info-bg:#0F2A44; --tick-ok:#3B6D11; --tick-run:#B26B00; } /* ══ 1. Шрифт: гротеск везде, моно — только у посчитанного ════════════ */ html[data-skin="v5"] body{font-family:var(--sans)} html[data-skin="v5"] .big-title, html[data-skin="v5"] .q, html[data-skin="v5"] .splash-t, html[data-skin="v5"] .wd-name, html[data-skin="v5"] .wname, html[data-skin="v5"] .alt .n, html[data-skin="v5"] .fact-t, html[data-skin="v5"] .verdict-t, html[data-skin="v5"] .avatar, html[data-skin="v5"] .sharecard h3{font-family:var(--sans);font-style:normal} html[data-skin="v5"] .big-title{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.12} html[data-skin="v5"] .nav .ttl{font-family:var(--sans);font-weight:600} html[data-skin="v5"] .nav .back, html[data-skin="v5"] .nav .act{color:var(--ink)} html[data-skin="v5"] .rbadge, html[data-skin="v5"] .fitdot, html[data-skin="v5"] .mbadge, html[data-skin="v5"] .myr, html[data-skin="v5"] .stat b, html[data-skin="v5"] .reg .pct, html[data-skin="v5"] .ax > span:last-child, html[data-skin="v5"] .offer .p, html[data-skin="v5"] .offers-note, html[data-skin="v5"] .banner, html[data-skin="v5"] .splash-s, html[data-skin="v5"] .v5-lbl, html[data-skin="v5"] .v5-stat, html[data-skin="v5"] .v5-sum, html[data-skin="v5"] .v5-note, html[data-skin="v5"] .v5-log, html[data-skin="v5"] .v5-cap, html[data-skin="v5"] .v5-foot{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* ══ 2. Служебные подписи — строчными, моно, без разрядки ═══════════ */ html[data-skin="v5"] .sec-h, html[data-skin="v5"] .role, html[data-skin="v5"] .wd-role, html[data-skin="v5"] .wd-h, html[data-skin="v5"] .wd-cell small{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--ink3); text-transform:none; letter-spacing:0; } html[data-skin="v5"] .sec-h{margin:22px 0 8px;padding:0} html[data-skin="v5"] .v5-lbl{font-size:11px;color:var(--ink3);font-weight:400} /* ══ 3. Поверхности: одна плоскость, секции через волосяную линию ═════ */ html[data-skin="v5"] body, html[data-skin="v5"] .device, html[data-skin="v5"] .screen{background:var(--surf)} html[data-skin="v5"] .scrolla.pad{padding-left:var(--padx);padding-right:var(--padx)} /* колонки экранов гибкие (порядок блоков); сжимать блоки нельзя: у .grp overflow:hidden, и список схлопывается */ html[data-skin="v5"] .scrolla > *{flex-shrink:0} html[data-skin="v5"] .screen:not(#s-auth):not(#s-scan):not(#s-prog) .card, html[data-skin="v5"] .screen:not(#s-auth):not(#s-scan):not(#s-prog) .grp{ margin-left:calc(-1*var(--padx)); margin-right:calc(-1*var(--padx)); border-radius:0; border-width:.5px 0; border-color:var(--line); box-shadow:none; } html[data-skin="v5"] .screen:not(#s-auth):not(#s-scan):not(#s-prog) .card{padding:16px var(--padx);margin-bottom:-.5px} html[data-skin="v5"] .screen:not(#s-auth):not(#s-scan):not(#s-prog) .card-photo{margin:-16px calc(-1*var(--padx)) 12px;border-radius:0} html[data-skin="v5"] .row, html[data-skin="v5"] .alt, html[data-skin="v5"] .hrow{border-color:var(--line)} html[data-skin="v5"] .row{padding-left:var(--padx);padding-right:var(--padx)} html[data-skin="v5"] .alt{padding-left:var(--padx);padding-right:var(--padx)} html[data-skin="v5"] .alt.top{border-left:0;padding-left:var(--padx)} html[data-skin="v5"] #s-auth .grp, html[data-skin="v5"] #s-auth .card{border:.5px solid var(--line2);border-radius:var(--r);box-shadow:none} /* ══ 4. Кнопки, чипсы, переключатели ═════════════════════════════════ */ html[data-skin="v5"] .btn{border-radius:12px;font-weight:500;box-shadow:none} html[data-skin="v5"] .btn.sec{background:none;color:var(--ink);box-shadow:inset 0 0 0 .5px var(--line2)} html[data-skin="v5"] .btn.gho{color:var(--ink2)} html[data-skin="v5"] .btn.tg{box-shadow:none} html[data-skin="v5"] .chips button{border:.5px solid var(--line2);border-radius:20px;background:none;color:var(--ink2);font-size:13.5px} html[data-skin="v5"] .chips button.on{background:var(--block);border-color:var(--block);color:var(--block-ink);font-weight:500} html[data-skin="v5"] .chips.seg{background:none;padding:0;gap:8px} html[data-skin="v5"] .chips.seg button{border:.5px solid var(--line);border-radius:12px;background:none;color:var(--ink2);box-shadow:none} html[data-skin="v5"] .chips.seg button.on{border-color:var(--line2);background:var(--surf);color:var(--ink);font-weight:500;box-shadow:none} /* «мне / под еду» на результате: у кнопок инлайн-стили из JS, поэтому !important */ html[data-skin="v5"] #mode{background:none!important;padding:0!important;gap:8px;margin:16px 0 0!important} html[data-skin="v5"] #mode button{border:.5px solid var(--line)!important;border-radius:12px!important;background:none!important; color:var(--ink2)!important;font-size:13.5px!important;font-weight:400!important;min-height:40px} html[data-skin="v5"] #mode button.on{border-color:var(--line2)!important;color:var(--ink)!important} html[data-skin="v5"] #bud-box{margin:14px 0 0!important;display:flex;align-items:center;gap:10px} html[data-skin="v5"] #bud-box label{margin:0!important;white-space:nowrap;display:inline!important} html[data-skin="v5"] #bud-box input{flex:1;min-width:0} html[data-skin="v5"] #mode button{text-transform:lowercase} html[data-skin="v5"] #bud-box label{font-family:var(--mono);font-size:11px!important;color:var(--ink3)!important} html[data-skin="v5"] #bud-box label b{color:var(--ink2)!important;font-weight:400} html[data-skin="v5"] #colors{margin:14px 0 0!important} /* ══ 5. Оси: полоса 6 px, личная метка тонкой чертой, серые — не решают ═ */ html[data-skin="v5"] .ax{grid-template-columns:88px 1fr 28px;font-size:12.5px;color:var(--ink)} html[data-skin="v5"] .bar{height:6px;border-radius:3px;background:var(--surf2)} html[data-skin="v5"] .bar i{background:var(--accent);opacity:1;border-radius:3px} html[data-skin="v5"] .bar u{height:12px;top:-3px;width:2px;background:var(--ink)} html[data-skin="v5"] .ax.low{color:var(--ink3)} html[data-skin="v5"] .ax.low .bar i{background:var(--line2)} html[data-skin="v5"] .ax > span:last-child{font-size:12px;text-align:right} html[data-skin="v5"] .ax.low > span:last-child{color:var(--ink3)} /* ══ 6. Совпадение и оценка каталога — справка, не вердикт ═══════════ */ html[data-skin="v5"] .fitdot{box-shadow:inset 0 0 0 .5px var(--line2);font-weight:500} html[data-skin="v5"] .mbadge{border-radius:5px;padding:3px 7px;font-weight:500} html[data-skin="v5"] .rbadge{background:var(--surf2);color:var(--ink2);font-weight:400} html[data-skin="v5"] .rbadge.hi{background:var(--surf3);color:var(--ink)} /* ══ 7. Главная: строка профиля, чёрная съёмка, «как было?» чипсами ═══ */ html[data-skin="v5"] #s-home .scrolla{display:flex;flex-direction:column} html[data-skin="v5"] #s-home .scrolla > *{order:5} html[data-skin="v5"] #s-home #home-stat{order:0} html[data-skin="v5"] #s-home .scanblk{order:1} html[data-skin="v5"] #s-home #home-pending{order:2} html[data-skin="v5"] #s-home #home-advice{order:3} html[data-skin="v5"] #s-home #home-import{order:4} html[data-skin="v5"] .v5-stat{font-size:12px;color:var(--ink3);line-height:1.9;padding:14px var(--padx); margin:0 calc(-1*var(--padx));border-bottom:.5px solid var(--line)} html[data-skin="v5"] .scanblk{background:var(--block);border:0;border-radius:0;margin:0 calc(-1*var(--padx));padding:18px var(--padx);box-shadow:none} html[data-skin="v5"] #s-scans .scanblk{border-radius:var(--r);margin:0 0 14px} html[data-skin="v5"] .scanblk-t{color:var(--block-ink);font-family:var(--sans);font-size:19px;font-weight:400;margin:0 0 4px} html[data-skin="v5"] .scanblk-s{color:var(--block-ink3);font-family:var(--mono);font-size:11px;margin:0 0 14px;opacity:1} html[data-skin="v5"] .scanblk-row{gap:8px} html[data-skin="v5"] .scanbtn{background:none;border:.5px solid var(--block-line);box-shadow:none;color:var(--block-ink2); border-radius:10px;padding:13px 4px;min-height:0} html[data-skin="v5"] .scanbtn svg, html[data-skin="v5"] .scanbtn small{display:none} html[data-skin="v5"] .scanbtn b{font-size:14px;font-weight:400;color:inherit} html[data-skin="v5"] .scanbtn:first-child{background:var(--block-ink);border-color:var(--block-ink);color:var(--block)} html[data-skin="v5"] .pend.v5p{padding:16px var(--padx);margin:0 calc(-1*var(--padx));border-bottom:.5px solid var(--line);background:var(--surf)} html[data-skin="v5"] .v5p .v5-row1{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} html[data-skin="v5"] .v5p .pend-skip{position:static;font-family:var(--sans);font-size:13px;color:var(--ink3);padding:0;min-height:0} html[data-skin="v5"] .v5-pt{font-size:17px;margin-bottom:2px} html[data-skin="v5"] .v5-pt b{font-weight:400;cursor:pointer} html[data-skin="v5"] .v5-psub{font-size:13px;color:var(--ink2);margin-bottom:12px} html[data-skin="v5"] .v5-qr{display:flex;gap:8px;flex-wrap:wrap} html[data-skin="v5"] .v5-qr button{font-size:13px;border:.5px solid var(--line);color:var(--ink2);border-radius:20px;padding:7px 14px;background:none} html[data-skin="v5"] .v5-qr button:first-child{border-color:var(--line2);color:var(--ink)} html[data-skin="v5"] .v5-qr button.on{background:var(--block);border-color:var(--block);color:var(--block-ink)} html[data-skin="v5"] .v5-qr button:disabled{opacity:.5} html[data-skin="v5"] .homecard{background:var(--surf);border:0;border-bottom:.5px solid var(--line);width:auto;margin:0 calc(-1*var(--padx)) 0;border-radius:0} html[data-skin="v5"] .homecard small{font-family:var(--mono);font-size:11px;color:var(--ink3);text-transform:none;letter-spacing:0;font-weight:400} html[data-skin="v5"] .homecard b{font-size:16px;font-weight:400;color:var(--ink)} html[data-skin="v5"] .homecard span{font-size:13px;color:var(--ink2)} /* ══ 8. Онбординг: шаг и пары моно, вопрос — чёрная полоса ═══════════ */ html[data-skin="v5"] .v5-onbh{padding:12px var(--padx);border-bottom:.5px solid var(--line)} html[data-skin="v5"] .v5-onbl{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-bottom:10px} html[data-skin="v5"] .v5-segs{display:flex;gap:3px} html[data-skin="v5"] .v5-segs i{flex:1;height:3px;border-radius:2px;background:var(--surf2)} html[data-skin="v5"] .v5-segs i.on{background:var(--accent)} html[data-skin="v5"] #s-onb .q{background:var(--block);color:var(--block-ink);margin:0 calc(-1*var(--padx)) 16px; padding:20px var(--padx);font-size:20px;font-weight:400;line-height:1.3} html[data-skin="v5"] .opt{border:.5px solid var(--line2);border-radius:14px;padding:16px;background:var(--surf);box-shadow:none} html[data-skin="v5"] .opt b{font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.4} html[data-skin="v5"] .opt small{font-family:var(--mono);font-size:11px;color:var(--ink3)} html[data-skin="v5"] .opt .v5-d{display:block;margin-top:6px} /* «Бывает по-разному» — наравне с ответами, а не мелкой ссылкой */ html[data-skin="v5"] .opt.mid{border-style:solid;border-color:var(--line);background:var(--surf);padding:16px} html[data-skin="v5"] .opt.mid b{color:var(--ink2);font-weight:400;font-size:17px} /* ══ 9. Обработка: весь экран — решение; снимок и журнал строками ═════ */ html[data-skin="v5"] #s-prog, html[data-skin="v5"] #s-prog .scrolla{background:var(--block)} html[data-skin="v5"] #s-prog .scrolla{justify-content:flex-start!important;padding-top:24px} html[data-skin="v5"] .v5-shot{position:relative;height:90px;background:var(--block-soft);border-radius:12px;margin-bottom:20px; overflow:hidden;display:flex;align-items:flex-end;padding:10px} html[data-skin="v5"] .v5-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45} html[data-skin="v5"] .v5-cap{position:relative;font-size:11px;color:var(--block-ink3)} html[data-skin="v5"] .v5-log{font-size:13px;line-height:2.2;color:var(--block-ink2)} html[data-skin="v5"] .v5-log i{font-style:normal;display:inline-block;width:1.4em} html[data-skin="v5"] .v5-log .ok i{color:var(--tick-ok)} html[data-skin="v5"] .v5-log .run{color:var(--block-ink)} html[data-skin="v5"] .v5-log .run i{background-image:linear-gradient(90deg,var(--block-ink3) 25%,var(--tick-run) 50%,var(--block-ink3) 75%);color:transparent} html[data-skin="v5"] .v5-log .wait{color:var(--block-ink3);opacity:.7} html[data-skin="v5"] .v5-seen{margin-top:20px;padding-top:16px;border-top:.5px solid var(--block-line);font-size:15px;color:var(--block-ink);line-height:1.6} html[data-skin="v5"] .scanline{box-shadow:none;height:1px;opacity:.7} html[data-skin="v5"] .frame{border-color:rgba(255,255,255,.4)} /* ══ 10. Результат: сводка моно, решение — чёрное, остальное строками ═ */ html[data-skin="v5"] #s-res .scrolla{display:flex;flex-direction:column} html[data-skin="v5"] #s-res .scrolla > *{order:11} html[data-skin="v5"] #s-res #res-sum{order:0} html[data-skin="v5"] #s-res #res-lead{order:1} html[data-skin="v5"] #s-res #cards{order:2} html[data-skin="v5"] #s-res #mode{order:3} html[data-skin="v5"] #s-res #dish{order:4} html[data-skin="v5"] #s-res #bud-box{order:5} html[data-skin="v5"] #s-res #res-rescore{order:7} html[data-skin="v5"] #s-res #colors{order:6} html[data-skin="v5"] #s-res #alts-h{order:8} html[data-skin="v5"] #s-res #alts{order:9} html[data-skin="v5"] #s-res #res-meta{order:10} html[data-skin="v5"] .v5-sum{font-size:12px;color:var(--ink3);padding:13px var(--padx);margin:0 calc(-1*var(--padx));border-bottom:.5px solid var(--line)} html[data-skin="v5"] .v5-note{font-size:11px;color:var(--ink3);margin-top:10px} html[data-skin="v5"] .v5-dec{background:var(--block);color:var(--block-ink);margin:0 calc(-1*var(--padx));padding:20px var(--padx);cursor:pointer} html[data-skin="v5"] .v5-dec .v5-lbl{color:var(--block-ink3);margin-bottom:10px} html[data-skin="v5"] .v5-name{font-size:26px;line-height:1.15;font-weight:400;letter-spacing:-.01em;margin-bottom:5px} html[data-skin="v5"] .v5-dec .v5-sub{font-size:14px;color:var(--block-ink2);margin-bottom:16px} html[data-skin="v5"] .v5-dec .why{font-size:15px;line-height:1.6;color:var(--block-ink);margin:0 0 18px} html[data-skin="v5"] .v5-dec .why .reason{display:inline;font-size:inherit;color:inherit;margin:0} html[data-skin="v5"] .v5-dec .offer-line{color:var(--block-ink2);margin:-8px 0 16px} html[data-skin="v5"] .v5-dec .offer-inline{color:var(--block-ink);text-decoration:underline;text-underline-offset:2px} html[data-skin="v5"] .v5-acts{display:flex;gap:10px} html[data-skin="v5"] .v5-acts .btn{flex:1;min-height:48px} html[data-skin="v5"] .v5-dec .v5-acts .btn{background:var(--block-ink);color:var(--block)} html[data-skin="v5"] .v5-mark{width:50px;flex:none;border-radius:12px;border:.5px solid var(--line2);color:var(--ink2); display:grid;place-items:center;background:none;min-height:48px} html[data-skin="v5"] .v5-dec .v5-mark{border-color:var(--block-line);color:var(--block-ink2)} html[data-skin="v5"] .v5-mark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round} html[data-skin="v5"] .v5-mark.on svg{fill:currentColor} html[data-skin="v5"] .v5-row{display:flex;align-items:center;gap:10px;width:calc(100% + 2*var(--padx));text-align:left; padding:14px var(--padx);margin:0 calc(-1*var(--padx));border-bottom:.5px solid var(--line);background:var(--surf);color:var(--ink)} html[data-skin="v5"] .v5-row .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} html[data-skin="v5"] .v5-rn{font-size:16px} html[data-skin="v5"] .v5-row .chev, html[data-skin="v5"] .v5-link .chev{width:8px;height:14px;stroke:var(--ink3);fill:none;stroke-width:1.6;flex:none} html[data-skin="v5"] .v5-notebox{font-size:14px;color:var(--ink2);padding:12px var(--padx);margin:0 calc(-1*var(--padx));background:var(--gold-bg);border-bottom:.5px solid var(--line)} html[data-skin="v5"] #alts-h{margin-top:24px} /* бутылка: решение — вердикт, чёрный; карточка вина под ним — обычная */ html[data-skin="v5"] .verdict{background:var(--block);border:0;border-radius:0;margin:0 calc(-1*var(--padx)) 12px;padding:20px var(--padx);box-shadow:none;text-align:left} html[data-skin="v5"] .verdict .verdict-t{color:var(--block-ink);font-size:26px;font-weight:400} html[data-skin="v5"] .verdict .verdict-r{color:var(--block-ink2);font-style:normal} html[data-skin="v5"] .verdict .hint{color:var(--block-ink3)} html[data-skin="v5"] .verdict .btn{background:var(--block-ink);color:var(--block)} html[data-skin="v5"] .verdict .btn.sec{background:none;color:var(--block-ink);box-shadow:inset 0 0 0 .5px var(--block-line)} /* Блок решения в детали скана — первая карточка, чёрная */ html[data-skin="v5"] .card.confident{background:var(--block);border-color:var(--block);color:var(--block-ink)} html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident{background:var(--surf);border-color:var(--line);color:var(--ink)} html[data-skin="v5"] .card.confident .wname{color:var(--block-ink)} html[data-skin="v5"] .card.confident .why, html[data-skin="v5"] .card.confident .why .reason{color:var(--block-ink)} html[data-skin="v5"] .card.confident .role, html[data-skin="v5"] .card.confident .more-l, html[data-skin="v5"] .card.confident .wmeta, html[data-skin="v5"] .card.confident .hint, html[data-skin="v5"] .card.confident .ax{color:var(--block-ink2)} html[data-skin="v5"] .card.confident .bar{background:var(--block-line)} html[data-skin="v5"] .card.confident .bar i, html[data-skin="v5"] .card.confident .bar u{background:var(--block-ink)} html[data-skin="v5"] .card.confident .btn{background:var(--block-ink);color:var(--block)} html[data-skin="v5"] .card.confident .btn.sec{background:none;color:var(--block-ink);box-shadow:inset 0 0 0 .5px var(--block-line)} html[data-skin="v5"] .card.confident .offer-inline, html[data-skin="v5"] .card.confident .wantmark{color:var(--block-ink)} html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .wname, html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .why, html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .why .reason{color:var(--ink)} html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .role, html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .more-l, html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .wmeta, html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .hint, html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .ax{color:var(--ink2)} html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .bar{background:var(--surf2)} html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .bar i{background:var(--accent)} html[data-skin="v5"] #s-res[data-kind="bottle"] .card.confident .bar u{background:var(--ink)} /* ══ 11. Карточка вина: флаг под названием, объяснение выше осей ═══════ */ html[data-skin="v5"] .v5-band{position:relative;height:130px;background:var(--block-soft);margin:0 calc(-1*var(--padx)) 16px; display:flex;align-items:flex-end;padding:10px 14px;overflow:hidden;border-radius:0;cursor:zoom-in;aspect-ratio:auto;width:auto} html[data-skin="v5"] .v5-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box} html[data-skin="v5"] .v5-band .v5-cap{position:relative;z-index:1;background:rgba(0,0,0,.35);color:#F1EFE8;padding:2px 6px;border-radius:4px} html[data-skin="v5"] .v5-wname{font-size:24px;line-height:1.2;font-weight:400;margin:0 0 4px} html[data-skin="v5"] .v5-wsub{font-size:14px;color:var(--ink2);margin-bottom:10px} html[data-skin="v5"] .v5-flagrow{display:flex;align-items:center;gap:8px;margin:0 0 14px;flex-wrap:wrap} html[data-skin="v5"] .v5-flag{font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:4px} html[data-skin="v5"] .v5-flag.ok{background:var(--go-bg);color:var(--go)} html[data-skin="v5"] .v5-flag.style{background:var(--gold-bg);color:var(--gold)} html[data-skin="v5"] .v5-flagrow span:last-child{font-size:12px;color:var(--ink2)} html[data-skin="v5"] .v5-wd .why{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 12px} html[data-skin="v5"] .v5-wd .why .reason{display:inline;font-size:inherit;color:inherit;margin:0} html[data-skin="v5"] .v5-wnum{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-bottom:16px} html[data-skin="v5"] .v5-sect{border-top:.5px solid var(--line);padding-top:14px;margin-bottom:14px} html[data-skin="v5"] .v5-sect > .v5-lbl{margin-bottom:12px} html[data-skin="v5"] .v5-axnote{font-size:12px;color:var(--ink3);margin-top:10px;line-height:1.5} html[data-skin="v5"] .v5-wd .v5-acts{margin:0 0 16px} html[data-skin="v5"] .v5-foot{border-top:.5px solid var(--line);padding-top:12px;margin-top:18px;font-size:11px;color:var(--ink3);line-height:1.7} html[data-skin="v5"] .wd-h{margin-top:20px} html[data-skin="v5"] .wd-lists button{border:.5px solid var(--line2);background:none;border-radius:12px} html[data-skin="v5"] .wd-chips span{border:.5px solid var(--line2);background:none;border-radius:20px} /* ══ 12. Мой вкус: шапка — решение; веса осей — видимое содержание ═════ */ html[data-skin="v5"] #s-exp .scrolla > :not(#exp-v5){display:none!important} html[data-skin="v5"] .v5-me{background:var(--block);color:var(--block-ink);margin:0 calc(-1*var(--padx));padding:20px var(--padx);position:relative} html[data-skin="v5"] .v5-me h2{font-size:22px;font-weight:400;margin:0 44px 8px 0;line-height:1.2} html[data-skin="v5"] .v5-me p{font-size:15px;color:var(--block-ink2);line-height:1.6;margin:0} html[data-skin="v5"] .v5-me .v5-lbl{color:var(--block-ink3);margin-top:12px} html[data-skin="v5"] .v5-me .gear{position:absolute;top:12px;right:10px;color:var(--block-ink2);background:none} html[data-skin="v5"] .v5-me .gear svg{stroke:currentColor} html[data-skin="v5"] .v5-sec{padding:16px var(--padx);margin:0 calc(-1*var(--padx));border-bottom:.5px solid var(--line)} html[data-skin="v5"] .v5-sec > .v5-lbl{margin-bottom:12px} html[data-skin="v5"] .v5-w{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} html[data-skin="v5"] .v5-w span{font-family:var(--mono);font-size:12px;padding:5px 9px;border-radius:5px;background:var(--surf2);color:var(--ink3)} html[data-skin="v5"] .v5-w span.hi{background:var(--info-bg);color:var(--info)} html[data-skin="v5"] .v5-p{font-size:13px;color:var(--ink2);line-height:1.6;margin:0} html[data-skin="v5"] .v5-link{display:flex;justify-content:space-between;align-items:center;gap:10px;width:calc(100% + 2*var(--padx)); padding:14px var(--padx);margin:0 calc(-1*var(--padx));border-bottom:.5px solid var(--line);font-size:15px;text-align:left;color:var(--ink);background:var(--surf)} html[data-skin="v5"] .v5-hist .h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:15px;cursor:pointer} html[data-skin="v5"] .v5-hist .h span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html[data-skin="v5"] .v5-hist .h span:last-child{font-family:var(--mono);font-size:12px;color:var(--ink2);flex:none} html[data-skin="v5"] .v5-hist .h.wait span:last-child{color:var(--ink3)} /* ══ 13. Каталог «Вина»: полки — строками, заглушек бутылок нет ════════ */ html[data-skin="v5"] .hrow-scroll, html[data-skin="v5"] .wd-sim{display:block;overflow:visible;margin:0 calc(-1*var(--padx));padding:0;scroll-snap-type:none} html[data-skin="v5"] .v5-mini{display:flex;align-items:center;gap:12px;width:100%;padding:12px var(--padx);border-bottom:.5px solid var(--line); background:var(--surf);text-align:left;color:var(--ink)} html[data-skin="v5"] .v5-mini .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} html[data-skin="v5"] .v5-mini .v5-rn{font-size:15px} html[data-skin="v5"] .v5-mini .v5-msub{font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html[data-skin="v5"] .v5-mini .r{display:flex;gap:6px;align-items:center;flex:none} html[data-skin="v5"] .feed-h{margin:22px 0 4px} html[data-skin="v5"] .feed-h b{font-size:17px;font-weight:500} html[data-skin="v5"] .feed-h .act{color:var(--ink2)} html[data-skin="v5"] #wines-feeds > .hint{font-family:var(--mono);font-size:11px;color:var(--ink3);margin:0 0 8px!important} /* ══ 14. Прочее ══════════════════════════════════════════════════════ */ html[data-skin="v5"] .hint{font-size:12.5px} html[data-skin="v5"] .tabs button{font-size:10px;letter-spacing:0} html[data-skin="v5"] .tabs svg{stroke-width:1.5} html[data-skin="v5"] .tabs button.on svg{stroke-width:1.9} html[data-skin="v5"] #s-splash{background:#141312} html[data-skin="v5"] .splash{color:#F1EFE8} html[data-skin="v5"] .splash-s{font-size:12px;opacity:.6} html[data-skin="v5"] .sharecard{background:#141312;color:#F1EFE8;border-radius:16px} html[data-skin="v5"] .sharecard .bar i, html[data-skin="v5"] .sharecard .bar u{background:#F1EFE8;opacity:1} html[data-skin="v5"] .offers-note{font-size:11px;color:var(--ink3)} html[data-skin="v5"] .offer{font-size:14px} html[data-skin="v5"] .banner{font-size:11.5px} html[data-skin="v5"] .toast{border-radius:12px} /* ══ 15. Данные 3.0: наценка, цена в магазине, откуда вкус, найденное фото ══ */ html[data-skin="v5"] #s-res #res-markup{order:0} html[data-skin="v5"] .v5-sum.has-next{border-bottom:0;padding-bottom:3px} html[data-skin="v5"] .v5-markup{padding-top:0} html[data-skin="v5"] .v5-retail{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink3);margin:-10px 0 16px} html[data-skin="v5"] .v5-dec .v5-retail{color:var(--block-ink2)} html[data-skin="v5"] .vd-mark, html[data-skin="v5"] .mq-flag{font-family:var(--mono);font-weight:400;border-radius:4px} html[data-skin="v5"] .v5-wname .vd-mark{margin-left:4px;vertical-align:5px} html[data-skin="v5"] .wd-axfrom, html[data-skin="v5"] .wd-findline, html[data-skin="v5"] .sd-markup{font-family:var(--mono);font-size:12px;color:var(--ink3)} /* шкала обработки и «Из вашей коллекции» в v5 */ html[data-skin="v5"] .prog-bar{background:var(--block-line)} html[data-skin="v5"] .prog-bar i{background:var(--tick-run)} html[data-skin="v5"] .prog-pct{color:var(--block-ink)} html[data-skin="v5"] .prog-stage{color:var(--block-ink2)} html[data-skin="v5"] .mine-tag{background:var(--surf2);color:var(--ink2)} html[data-skin="v5"] .v5-dec .mine-tag{background:var(--block-soft);color:var(--block-ink)} html[data-skin="v5"] .v5-mine{color:var(--accent)} /* «Поделиться» в шапке: в v5 шапка чёрно-белая, значок — чернилами, тоньше */ html[data-skin="v5"] .nav .share{color:var(--ink)} html[data-skin="v5"] .nav .share svg{stroke-width:1.5} html[data-skin="v5"] .nav .share:active{background:var(--surf2)} /* ══ 16. Знания: одна поверхность, посчитанное — моно, чёрный блок один ══ */ /* Витрина: подзаголовок и счётчики — моно, карточки становятся секциями */ html[data-skin="v5"] .know-sub{font-family:var(--mono);font-size:11px;color:var(--ink3)} /* Регистр подписей — общий для всего v5 (§2): на «Знаниях» он не свой, иначе при переходе с «Вин» подписи меняли бы вид */ html[data-skin="v5"] .tracks{display:block} /* Каркас и отказ — та же плоскость: без рамок и скруглений */ html[data-skin="v5"] .sk{background:var(--surf2);border:0;border-bottom:.5px solid var(--line);border-radius:0; margin:0 calc(-1*var(--padx));width:calc(100% + 2*var(--padx))} html[data-skin="v5"] #know-oops .oops-t{font-weight:500} html[data-skin="v5"] .cont{background:var(--surf);border:0;border-bottom:.5px solid var(--line);border-radius:0; box-shadow:none;margin:0 calc(-1*var(--padx));padding:14px var(--padx);width:calc(100% + 2*var(--padx))} html[data-skin="v5"] .trk{background:var(--surf);border:0;border-bottom:.5px solid var(--line);border-radius:0; box-shadow:none;margin:0 calc(-1*var(--padx));padding:14px var(--padx);width:calc(100% + 2*var(--padx))} html[data-skin="v5"] .cont-r .t{font-size:16px;font-weight:400;letter-spacing:-.01em} html[data-skin="v5"] .cont-r .pct{font-family:var(--mono);font-size:12px;color:var(--ink2)} html[data-skin="v5"] .cont .m{font-family:var(--mono);font-size:11px;color:var(--ink3)} html[data-skin="v5"] .trk .m{font-family:var(--mono);font-size:11px;color:var(--ink3)} html[data-skin="v5"] .kbar{height:3px;border-radius:0;background:var(--surf3);margin-top:10px} html[data-skin="v5"] .kbar i{background:var(--ink);border-radius:0} /* Статья дня — то самое «вот решение»: единственный чёрный блок экрана */ html[data-skin="v5"] .today{background:var(--block);border:0;border-radius:0;box-shadow:none;color:var(--block-ink); margin:0 calc(-1*var(--padx));padding:20px var(--padx);width:calc(100% + 2*var(--padx))} html[data-skin="v5"] .today .t{font-size:24px;font-weight:400;letter-spacing:-.01em;line-height:1.2} html[data-skin="v5"] .today .s{font-size:15px;color:var(--block-ink2);line-height:1.6} html[data-skin="v5"] .today .m{font-family:var(--mono);font-size:11px;color:var(--block-ink3)} /* Разделы и найденное: строки одной поверхности */ html[data-skin="v5"] .secarts{background:var(--surf)} html[data-skin="v5"] .secarts .arow{padding-left:calc(var(--padx) + 12px)} html[data-skin="v5"] .arow .snip{color:var(--ink2)} html[data-skin="v5"] .term{padding:14px var(--padx);border-bottom:.5px solid var(--line)} html[data-skin="v5"] .term>b{font-weight:500;font-size:15px} html[data-skin="v5"] .term .aka{font-family:var(--mono);font-size:11px} html[data-skin="v5"] .term .more{color:var(--ink)} html[data-skin="v5"] .alpha{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0;color:var(--ink3); margin:18px 0 6px} /* Статья: заголовок без нажима, шапка и служебное — моно, врезка полосой */ html[data-skin="v5"] .art-meta{font-family:var(--mono);font-size:11px;color:var(--ink3)} html[data-skin="v5"] .art-t{font-size:26px;font-weight:400;letter-spacing:-.015em;line-height:1.18} html[data-skin="v5"] .art-s{font-size:15px;color:var(--ink2);line-height:1.6} html[data-skin="v5"] .art-text{font-size:16px;line-height:1.7} html[data-skin="v5"] .art-text h2{font-size:18px;font-weight:500;letter-spacing:-.01em;margin:28px 0 8px} html[data-skin="v5"] .art-text h3{font-size:16px;font-weight:500;margin:22px 0 6px} html[data-skin="v5"] .art-text a[data-slug]{color:var(--ink);border-bottom:.5px solid var(--line2)} html[data-skin="v5"] .art-text blockquote{background:var(--surf2);border-left:2px solid var(--ink);border-radius:0; font-size:15px;padding:14px var(--padx);margin:18px calc(-1*var(--padx))} /* Таблицы статей почти все прозаические («Сорт · Вкус · Где растёт»), поэтому набор обычный: моно в v5 отведено посчитанному. Цифры — в одну ширину */ html[data-skin="v5"] .art-text table{font-size:14px;font-variant-numeric:tabular-nums} html[data-skin="v5"] .art-text td{font-family:var(--sans)} /* Дорожка оглавления и подложка под дымкой таблицы — по поверхности экрана v5 */ html[data-skin="v5"] .art-toc{margin:0 calc(-1*var(--padx)) 18px;padding:2px var(--padx) 6px} html[data-skin="v5"] .art-tw{--tw-bg:var(--surf)} html[data-skin="v5"] .art-text th{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink3)} html[data-skin="v5"] .art-text td{border-bottom:.5px solid var(--line)} html[data-skin="v5"] .art-text th{border-bottom:.5px solid var(--line)} html[data-skin="v5"] .art-src{border-top:.5px solid var(--line)} html[data-skin="v5"] .art-src summary{font-family:var(--mono);font-size:11px} html[data-skin="v5"] .art-src li{font-family:var(--mono);font-size:11px;line-height:1.6} /* Прочитано: галочка того же зелёного, что и «сделано» в журнале; на чёрном блоке статьи дня — его светлый вариант */ html[data-skin="v5"] .rd{font-weight:400} html[data-skin="v5"] .today .rd{color:var(--tick-ok)} /* Отметка и «Дальше»: подпись кнопки — моно, как все подписи v5 */ html[data-skin="v5"] .art-done{font-size:15px} html[data-skin="v5"] .art-done .ck{box-shadow:inset 0 0 0 1px var(--line2)} html[data-skin="v5"] .art-next .nx small{font-family:var(--mono);font-size:11px;font-weight:400;opacity:.7} html[data-skin="v5"] .art-next .nx b{font-size:15px;font-weight:500} html[data-skin="v5"] .art-geo .geo-where{font-size:13px} /* ══ 18. Откуда: кусок карты на странице вина ══ */ /* Секция отделена волосяной линией, у карты острые углы, посчитанное — моноширинным; цвета карты берутся из токенов слоя. */ html[data-skin="v5"] .wd-geo{border-top:.5px solid var(--line);padding-top:14px;margin-top:16px} html[data-skin="v5"] .wd-geo .wd-h{margin-top:0} html[data-skin="v5"] .geo-pic{border:.5px solid var(--line);border-radius:0} html[data-skin="v5"] .geo-map{border:.5px solid var(--line);border-radius:0} html[data-skin="v5"] .geo-tip{border:.5px solid var(--line2);border-radius:0;font-family:var(--mono);font-size:11px} html[data-skin="v5"] .geo-open{font-size:13px} html[data-skin="v5"] .geo-own{fill:var(--line2);stroke:var(--ink3);stroke-width:.5} html[data-skin="v5"] .geo-land{fill:var(--surf2);stroke:var(--line2);stroke-width:.4} html[data-skin="v5"] .geo-sea{fill:var(--bg)} html[data-skin="v5"] .geo-halo{fill:var(--ink);opacity:.14} html[data-skin="v5"] .geo-dot{fill:var(--ink)} html[data-skin="v5"] .geo-pin{fill:var(--ink)} html[data-skin="v5"] .geo-eye{fill:var(--bg)} html[data-skin="v5"] .geo-where{font-size:14px} html[data-skin="v5"] .geo-seen{font-family:var(--mono);font-size:11px;color:var(--ink3)} html[data-skin="v5"] .geo-n{font-family:var(--mono);font-variant-numeric:tabular-nums} html[data-skin="v5"] .wd-geo .geo-go{padding-left:0;padding-right:0;border-color:var(--line)} html[data-skin="v5"] .wd-geo .geo-go .l b{font-weight:500;font-size:15px} /* ══ Вопрос о возрасте до входа ══ */ html[data-skin="v5"] .age-q{font-size:25px;font-weight:400;letter-spacing:-.015em} html[data-skin="v5"] .age-s{font-size:15px;line-height:1.6} /* ══ Подсказка «На экран «Домой»» ══ */ /* Не чёрная: чёрный блок главной уже занят съёмкой. Материал таббара — волосяная рамка и размытие, без тени */ html[data-skin="v5"] .a2hs{border:.5px solid var(--line2);box-shadow:none;background:color-mix(in srgb, var(--surf) 92%, transparent);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)} html[data-skin="v5"] .a2hs-b b{font-weight:500;font-size:15.5px} html[data-skin="v5"] .a2hs-s{font-size:13.5px} html[data-skin="v5"] .a2hs .gl{background:none;box-shadow:inset 0 0 0 .5px var(--line2);border-radius:6px} html[data-skin="v5"] .a2hs .gl svg{stroke:var(--ink);stroke-width:1.6} html[data-skin="v5"] .a2hs .gl.dots{color:var(--ink)} html[data-skin="v5"] .a2hs .xclose{background:none;box-shadow:inset 0 0 0 .5px var(--line)}