/* HOLAF · Фидбек v2 — каркас и новые экраны (эталон: design/holaf_ui_v2.html).
   Подключается ПОСЛЕ style.css. Старые экраны живут на своих стилях, поэтому здесь:
   • токены с префиксом --v-* (у style.css свои --bg/--line — не перетираем);
   • классы компонентов с префиксом v- (у style.css есть .btn/.pill/.kpi/.empty — не смешиваем);
   • тёмная тема включается только на новых экранах: пока виден старый экран, на <html> стоит
     data-legacy, и страница остаётся светлой (старые экраны тёмную тему не умеют). */
:root{
  --v-bg:#f3f5f4; --v-surface:#ffffff; --v-sunk:#e9edeb; --v-line:#d6dcd9; --v-fg:#18201d; --v-muted:#5d6964;
  --v-accent:#0f6b5f; --v-accent-soft:#d9efe9; --v-accent-fg:#ffffff;
  --v-ok:#1f7a3d; --v-ok-soft:#dcf1e2; --v-warn:#a15c00; --v-warn-soft:#fbecd2; --v-bad:#b4372f; --v-bad-soft:#f8e3e1;
  --v-font-ui:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --v-font-data:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --v-r:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-legacy]){
  --v-bg:#111614; --v-surface:#181f1c; --v-sunk:#202925; --v-line:#2e3934; --v-fg:#e6ece9; --v-muted:#9aa8a2;
  --v-accent:#4fc2ad; --v-accent-soft:#173a33; --v-accent-fg:#0b1311;
  --v-ok:#6fd08f; --v-ok-soft:#173523; --v-warn:#f2b45c; --v-warn-soft:#3b2a10; --v-bad:#f0938b; --v-bad-soft:#40201d;
  color-scheme:dark}}
:root[data-theme="dark"]:not([data-legacy]){
  --v-bg:#111614; --v-surface:#181f1c; --v-sunk:#202925; --v-line:#2e3934; --v-fg:#e6ece9; --v-muted:#9aa8a2;
  --v-accent:#4fc2ad; --v-accent-soft:#173a33; --v-accent-fg:#0b1311;
  --v-ok:#6fd08f; --v-ok-soft:#173523; --v-warn:#f2b45c; --v-warn-soft:#3b2a10; --v-bad:#f0938b; --v-bad-soft:#40201d;
  color-scheme:dark}
:root:not([data-legacy]) body{background:var(--v-bg);color:var(--v-fg)}

/* ---------- верхняя навигация (5 разделов) ---------- */
header.v2-topbar{position:sticky;top:0;z-index:10;height:auto;display:block;padding:0 16px;
  background:var(--v-surface);color:var(--v-fg);border-bottom:1px solid var(--v-line);font-family:var(--v-font-ui)}
.v2-topin{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.v2-brand{font-weight:700;letter-spacing:.02em;padding-block:12px}
.v2-brand small{font-weight:500;color:var(--v-muted);margin-left:6px;font-size:13px}
nav.v2-tabs{display:flex;gap:2px;flex-wrap:wrap;flex:1;min-width:0}
nav.v2-tabs a{padding:14px 10px 12px;color:var(--v-muted);text-decoration:none;font-weight:500;font-size:14px;
  border-bottom:2px solid transparent;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
nav.v2-tabs a:hover{color:var(--v-fg)}
nav.v2-tabs a.on{color:var(--v-fg);border-color:var(--v-accent)}
nav.v2-tabs .v-badge{font-family:var(--v-font-data);font-size:11px;background:var(--v-bad-soft);color:var(--v-bad);border-radius:999px;padding:0 6px}
nav.v2-tabs .v-badge.calm{background:var(--v-sunk);color:var(--v-muted)}
nav.v2-tabs .v-badge:empty{display:none}
header.v2-topbar .right{margin-left:auto;display:flex;gap:6px;align-items:center;min-width:0;color:var(--v-muted);font-size:12px}
header.v2-topbar .pill{background:var(--v-sunk);color:var(--v-muted);border-radius:999px;padding:3px 10px;font-size:12px}
header.v2-topbar .pill.auto-on{background:var(--v-ok-soft);color:var(--v-ok)}
header.v2-topbar .pill.auto-off{background:var(--v-sunk);color:var(--v-muted)}
header.v2-topbar .pill-btn:hover{background:var(--v-accent-soft)}
header.v2-topbar .pill-btn:focus-visible,nav.v2-tabs a:focus-visible{outline:2px solid var(--v-accent);outline-offset:2px}
@media (max-width:820px){
  header.v2-topbar .right{display:none}
  .v2-topin{gap:0}
  nav.v2-tabs{flex-wrap:nowrap;overflow-x:auto;flex:1 0 100%;scrollbar-width:none}
  nav.v2-tabs a{padding:10px 8px 9px}
}

/* ---------- строка «зачем» над каждым экраном ---------- */
.v2-why{max-width:1440px;margin:14px auto 0;padding:0 16px;font-family:var(--v-font-ui);color:var(--v-fg)}
.v2-why h1{font-size:22px;margin:2px 0 0;font-weight:700;text-wrap:balance}
.v2-why .v-sub{color:var(--v-muted);margin:2px 0 0;max-width:78ch;font-size:14px;line-height:1.45}
.v2-why .v-interim{display:inline-block;margin-top:6px;font-size:12px;background:var(--v-sunk);color:var(--v-muted);border-radius:999px;padding:2px 10px}

/* ---------- новые экраны: базовый контейнер ---------- */
.v2{font-family:var(--v-font-ui);font-size:14px;line-height:1.45;color:var(--v-fg)}
.wrap.v2{max-width:1440px;display:flex;flex-direction:column;gap:14px}
.wrap.v2.hidden{display:none}
.wrap.v2>div{display:flex;flex-direction:column;gap:14px;min-width:0}
header.v2-topbar #st-llm{max-width:80px}
.v2 h2{font-size:15px;margin:0;font-weight:600}
.v2 button,.v2 input,.v2 select{font:inherit;color:inherit}
.v2 button{cursor:pointer}
.v2 :focus-visible{outline:2px solid var(--v-accent);outline-offset:2px}
.v2 table{width:100%;border-collapse:collapse}
.v2 th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-muted);text-align:left;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--v-line);background:var(--v-surface)}
.v2 td{padding:9px 10px;border-bottom:1px solid var(--v-line);vertical-align:top}
.v2 td.v-num,.v2 th.v-num{text-align:right;font-family:var(--v-font-data);font-variant-numeric:tabular-nums}
.v2 td.v-mono{font-family:var(--v-font-data);font-size:12px;color:var(--v-muted);white-space:nowrap}
.v-muted{color:var(--v-muted)}
.v-small{font-size:12px}
.v-btn{border:1px solid var(--v-line);background:var(--v-surface);color:var(--v-fg);border-radius:var(--v-r);padding:7px 12px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.v-btn:hover{border-color:var(--v-accent)}
.v-btn:disabled{opacity:.5;cursor:not-allowed}
.v-btn.primary{background:var(--v-accent);color:var(--v-accent-fg);border-color:var(--v-accent)}
.v-btn.danger{color:var(--v-bad);border-color:var(--v-bad);background:var(--v-surface)}
.v-btn.sm{padding:4px 9px;font-size:13px}
.v-panel{background:var(--v-surface);border:1px solid var(--v-line);border-radius:var(--v-r);min-width:0}
.v-ph{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--v-line);flex-wrap:wrap}
.v-pb{padding:12px}
.v-frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.v-f{border:1px solid var(--v-line);background:var(--v-surface);color:var(--v-fg);border-radius:var(--v-r);padding:6px 8px;font-size:14px;width:auto;min-height:0}
.v-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.v-kpi{background:var(--v-surface);border:1px solid var(--v-line);border-radius:var(--v-r);padding:10px 12px;min-width:0}
.v-kpi .l{font-size:12px;color:var(--v-muted)}
.v-kpi .v{font-family:var(--v-font-data);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.v-kpi .v.na{font-family:var(--v-font-ui);font-size:15px;color:var(--v-muted);padding-block:5px}
.v-kpi .s{font-size:12px;color:var(--v-muted)}
.v-kgroup{display:flex;flex-direction:column;gap:6px}
.v-kgroup>h3{margin:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-muted);font-weight:600}
.v-pill{font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap;display:inline-block}
.p-ok{background:var(--v-ok-soft);color:var(--v-ok)} .p-warn{background:var(--v-warn-soft);color:var(--v-warn)}
.p-bad{background:var(--v-bad-soft);color:var(--v-bad)} .p-mute{background:var(--v-sunk);color:var(--v-muted)}
.v-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:var(--v-r);padding:12px 14px;border:1px solid}
.v-banner.bad{background:var(--v-bad-soft);border-color:var(--v-bad)}
.v-banner.ok{background:var(--v-ok-soft);border-color:var(--v-ok)}
.v-banner.warn{background:var(--v-warn-soft);border-color:var(--v-warn)}
.v-banner b{display:block}
.v-banner>div{min-width:0;flex:1 1 280px}
.v-tscroll{overflow-x:auto}
.v-empty{padding:28px;text-align:center;color:var(--v-muted)}
.v-err{color:var(--v-bad)}
.v-cmp-table{min-width:720px}
.v-cmp-text{max-width:56ch;overflow-wrap:anywhere}

/* ---------- настройки ---------- */
.v-cfg{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.v-cfgnav{display:flex;flex-direction:column;gap:2px;background:var(--v-surface);border:1px solid var(--v-line);border-radius:var(--v-r);padding:6px}
.v-cfgnav button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;gap:6px;align-items:center}
.v-cfgnav button:hover{background:var(--v-sunk)}
.v-cfgnav button.on{background:var(--v-accent-soft)}
.v-cfgbody{display:flex;flex-direction:column;gap:12px;min-width:0}
.v-switch{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--v-line)}
.v-switch:first-child{border-top:0}
.v-switch .d{font-size:12px;color:var(--v-muted)}
.v-tg{position:relative;width:40px;height:22px;border-radius:999px;border:0;background:var(--v-line);flex:none;padding:0}
.v-tg::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--v-surface);transition:left .15s}
.v-tg.on{background:var(--v-accent)} .v-tg.on::after{left:21px}
.v-tg:disabled{opacity:.45;cursor:not-allowed}
.v-login{display:flex;flex-direction:column;gap:8px;max-width:360px}
@media (max-width:820px){
  .v-cfg{grid-template-columns:minmax(0,1fr)}
  .v-cfgnav{flex-direction:row;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.v-tg::after{transition:none}}

/* ---------- настройки → анкета (этап 2) ---------- */
.v-chip{border:1px solid var(--v-line);background:var(--v-surface);color:var(--v-fg);border-radius:999px;padding:4px 11px;font-size:13px;white-space:nowrap}
.v-chip.on{background:var(--v-fg);color:var(--v-bg);border-color:var(--v-fg)}
.v-kpi .v.v-below{color:var(--v-warn)}
.v-link{color:var(--v-accent)}
.v-warns{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--v-warn);display:flex;flex-direction:column;gap:3px}
.v-cat-table{min-width:560px}
.v-cat-table td:last-child{max-width:52ch;overflow-wrap:anywhere}
.v-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px}
.v-thread{display:flex;flex-direction:column;gap:8px;padding:12px}
.v-msg{max-width:85%;border-radius:10px;padding:8px 10px;font-size:13px;overflow-wrap:anywhere}
.v-msg.bot{background:var(--v-sunk);align-self:flex-start}
.v-msg.me{background:var(--v-accent-soft);align-self:flex-end}
.v-tocap{font-size:11px;color:var(--v-accent);align-self:flex-end;margin:-4px 0 2px;max-width:85%;text-align:right}

/* ---------- фидбек по товарам (этап 3) ---------- */
.v2-why .v-whyrow{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.v2-why .v-whytxt{flex:1 1 480px;min-width:0}
.v2-why .v-whyrow>.v-frow{flex:0 1 auto;font-family:var(--v-font-ui);font-size:14px}
.v-strip{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--v-muted);padding:10px 12px}
.v-strip b{color:var(--v-fg);font-family:var(--v-font-data);font-weight:500}
.v-strip b.na{font-family:var(--v-font-ui);color:var(--v-muted);font-weight:400}
.v-filters{display:flex;flex-direction:column;gap:8px}
.v-flabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-muted);min-width:64px}
.v-chip .n{font-family:var(--v-font-data);font-size:11px;opacity:.7;margin-left:4px}
.v2 .v-search{min-width:200px;flex:1 1 220px}
.v2 .v-fb-art{width:130px}
.v2 .v-fb-prod{max-width:100%;min-width:0}
.v-tog{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--v-muted)}
.v-tog input{width:auto;margin:0}
.v-fb-table{min-width:860px}
.v-fb-text{overflow-wrap:anywhere}
.v-qcap{display:block;font-size:11px;letter-spacing:.02em;color:var(--v-muted);margin-bottom:2px}
.v-sortbtn{border:0;background:none;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;white-space:nowrap}
.v-thsub{font-size:10px;letter-spacing:0;text-transform:none;font-weight:400;margin-top:2px}
.v-more{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--v-line)}
.v-fg{color:var(--v-fg)}
.v-fb-prompt{width:100%;min-height:160px;resize:vertical;font-size:13px}
@media (max-width:520px){.v2 .v-search{min-width:0;flex-basis:100%}.v-filters .v-flabel{flex-basis:100%}}

/* ---------- управление счастьем (этап 4) ---------- */
/* style.css держит прежний #page-happy на высоте экрана (консоль из двух зон) — v2 растёт по содержимому */
#page-happy.v2:not(.hidden){height:auto;max-width:1440px;display:flex}
#page-happy .case-resources{display:flex;flex-wrap:wrap;gap:6px;background:none;border:0;padding:0;margin:0}
.v-kbq{border-color:var(--v-warn)}
.v-kbq .v-ph{background:var(--v-warn-soft)}
.v-grid-q{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){.v-grid-q{grid-template-columns:minmax(0,1fr)}}
.v-hq-head{flex-direction:column;align-items:stretch}
.v2 .v-hsearch{width:100%;box-sizing:border-box}
.v-qlist{display:flex;flex-direction:column;max-height:70vh;overflow-y:auto}
@media (max-width:980px){.v-qlist{max-height:48vh}}
.v-qitem{display:flex;flex-direction:column;gap:4px;text-align:left;border:0;border-bottom:1px solid var(--v-line);background:none;padding:10px 12px;width:100%;color:var(--v-fg);min-width:0}
.v-qitem:hover{background:var(--v-sunk)}
.v-qitem.on{background:var(--v-accent-soft)}
.v-qitem .top{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--v-muted);min-width:0}
.v-qitem .top span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-qitem .top span:last-child{flex:none}
.v-qitem .t{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.v-qitem .pills{display:flex;gap:4px;flex-wrap:wrap}
.v-qitem .v-pill{white-space:normal}
.v-qgroup{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-muted);padding:10px 12px 6px;font-weight:600;border-bottom:1px solid var(--v-line)}
.v-qgroup .d{display:block;text-transform:none;letter-spacing:0;font-weight:400;margin-top:2px}
.v-more-btn{margin:8px 12px}
.v-hq-foot{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--v-line)}
.v-hq-foot summary,.v-det>summary{cursor:pointer}
.v-hbanners{display:flex;flex-direction:column;gap:8px}
#page-happy .v-hbanners>*{flex:none}
.v-hcase{display:flex;flex-direction:column;min-width:0}
.v-hc-title{min-width:0;flex:1 1 240px}
.v-hc-title h2{overflow-wrap:anywhere}
.v-hc-meta{display:flex;flex-direction:column;gap:6px;padding-bottom:0}
.v-hc-ctx{padding-top:0}
.v-thread{overflow-wrap:anywhere}
.v-msg .who{display:block;font-size:11px;margin-bottom:2px;color:var(--v-muted)}
.v-msg.client{background:var(--v-sunk);align-self:flex-start}
.v-msg.us{background:var(--v-accent-soft);align-self:flex-end}
.v-msg.vbot{background:var(--v-surface);border:1px dashed var(--v-line);align-self:flex-end}
.v-msg.sys{background:none;border:1px solid var(--v-line);align-self:center;font-size:12px;color:var(--v-muted)}
.v-h-ret{border-top:1px solid var(--v-line);display:flex;flex-direction:column;gap:6px;font-size:13px}
.v-reply{display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid var(--v-line);min-width:0}
#page-happy textarea{width:100%;min-height:130px;max-height:none;resize:vertical;box-sizing:border-box;border:1px solid var(--v-line);background:var(--v-surface);color:var(--v-fg);border-radius:var(--v-r);padding:8px 10px;font:inherit;font-size:14px;line-height:1.45}
#page-happy textarea[readonly]{background:var(--v-sunk);color:var(--v-muted)}
#page-happy textarea.v-ta-note{min-height:60px}
.v-teach{display:flex;flex-direction:column;gap:6px}
.v-teach-more{display:flex;flex-direction:column;gap:4px}
.v-teach-more[hidden],.v-skip[hidden]{display:none}
.v-teach .v-f{width:100%;box-sizing:border-box}
.v-trial{display:flex;flex-direction:column;gap:2px;background:var(--v-accent-soft);border:1px solid var(--v-accent);border-radius:var(--v-r);padding:8px 10px}
.v-suggest{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--v-ok-soft);border:1px solid var(--v-ok);border-radius:var(--v-r);padding:8px 10px}
.v-suggest>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px}
.v-outs .v-chip{white-space:normal;text-align:left}
.v-chip.v-sugg{border-color:var(--v-ok);box-shadow:0 0 0 2px var(--v-ok-soft)}
.v-skip{display:flex;flex-direction:column;gap:6px;background:var(--v-sunk);border-radius:var(--v-r);padding:8px 10px}
.v-det>summary{font-size:13px;color:var(--v-muted)}
.v-det-b{display:flex;flex-direction:column;gap:6px;margin-top:6px;align-items:flex-start}
.v-det-b>textarea{align-self:stretch}
.v-hint{text-decoration:underline dotted;cursor:help}
.v-banner>div{display:flex;flex-direction:column;gap:4px}
.v-banner .v-f,.v-banner .v-ta-note{width:100%;box-sizing:border-box}
.v-route{display:flex;flex-direction:column;gap:6px;font-size:13px}
/* блоки прежнего экрана внутри v2 — на токенах темы */
#page-happy .nofact-hint,#page-happy .send-warn,#page-happy .llm-off,#page-happy .esc{background:var(--v-warn-soft);border:1px solid var(--v-warn);color:var(--v-fg);border-radius:var(--v-r);padding:8px 10px;font-size:13px;margin:0}
#page-happy .nofact-hint b,#page-happy .send-warn b,#page-happy .llm-off b,#page-happy .esc b{color:var(--v-warn)}
#page-happy .send-warn small{color:var(--v-muted)}
#page-happy code{background:var(--v-sunk);color:var(--v-fg);border-radius:4px;padding:1px 4px;font-size:12px}
#page-happy .recon-alert{background:var(--v-bad-soft);border:1px solid var(--v-bad);color:var(--v-fg);border-radius:var(--v-r);padding:10px 12px;font-size:13px;margin:0}
#page-happy .recon-alert b{color:var(--v-bad)}
#page-happy .recon-ok{font-size:12px;color:var(--v-muted);margin:0}
#page-happy .skusub{font-size:12px;color:var(--v-muted)}
#page-happy .skusub b{color:var(--v-fg)}
#page-happy .muted{color:var(--v-muted)}
#page-happy .casequote{background:var(--v-sunk);color:var(--v-fg);border-radius:10px;padding:8px 10px;font-size:13px;margin:6px 0 0}
#page-happy .v-h-survey .esc{margin-bottom:6px}
#page-happy .case-link{display:inline-flex;align-items:center;border:1px solid var(--v-line);background:var(--v-surface);color:var(--v-accent);border-radius:var(--v-r);padding:3px 8px;font-size:12px;font-weight:500;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-happy .case-link-main{background:var(--v-accent-soft)}
#page-happy .case-thumb,#page-happy .atts .thumb{border-color:var(--v-line);background:var(--v-sunk)}
#page-happy .atts .att-prod,#page-happy .atts .att-link{background:var(--v-sunk);color:var(--v-fg);border-color:var(--v-line)}
#page-happy .assist-strip{margin:0}
#page-happy .assist-card{background:var(--v-sunk);border-color:var(--v-line)}
#page-happy .assist-card small{color:var(--v-muted)}
/* возврат: решение по заявке WB — большой блок прежнего экрана; рисуем его светлым «островом»,
   чтобы в тёмной теме не ломались его цвета (перенос на токены — отдельной задачей) */
.v-island{background:#fff;color:#18201d;color-scheme:light;border:1px solid var(--v-line);border-radius:var(--v-r);padding:10px;min-width:0;overflow-wrap:anywhere}
.v2 .v-island .btn-pri,.v2 .v-island .btn-ok,.v2 .v-island .btn-warn{color:#fff}
.v2 .v-island .btn-mut{color:#333}
.v-island .return-action-choices{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.v-island .return-facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#page-happy .v-island textarea{background:#fff;color:#18201d}
/* настройки → знания бота */
.v-kb-table{min-width:880px}
.v-kb-text{max-width:42ch;overflow-wrap:anywhere;white-space:pre-wrap}
.v-mono-kw{font-family:var(--v-font-data);font-size:12px;overflow-wrap:anywhere;max-width:22ch}
.v-kb-hist td{background:var(--v-sunk)}
.v-kb-ver{display:flex;flex-direction:column;gap:3px;padding:8px 0;border-bottom:1px solid var(--v-line)}
.v-kb-ver:last-child{border-bottom:0}
.v-cf{display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid var(--v-line)}
.v-ph+.v-cf{border-top:0}
.v-cf-sts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:8px}
.v-cf-st{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:var(--v-sunk);border-radius:var(--v-r);padding:8px 10px;overflow-wrap:anywhere}
.v-cfgbody textarea.v-ta-note{width:100%;box-sizing:border-box;min-height:60px;border:1px solid var(--v-line);background:var(--v-surface);color:var(--v-fg);border-radius:var(--v-r);padding:8px;font:inherit}
/* настройки → состояние системы (этап 5): на телефоне строка таблицы становится карточкой —
   без горизонтальной прокрутки; подсказка «что делать» переносится по словам */
.v-health-table td:first-child{overflow-wrap:anywhere}
.v-health-table .v-h-hint{color:var(--v-warn);margin-top:2px;max-width:72ch}
.v-health-table td:first-child .v-btn{margin-top:6px}
.v-health-table .v-h-when{white-space:nowrap;color:var(--v-muted);font-family:var(--v-font-data);font-size:12px}
@media (max-width:560px){
  .v-health-table thead{display:none}
  .v-health-table,.v-health-table tbody,.v-health-table td{display:block;width:auto}
  .v-health-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:10px 12px;border-bottom:1px solid var(--v-line)}
  .v2 .v-health-table td{border:0;padding:0}
  .v-health-table td:first-child{grid-column:1/-1}
  .v-health-table .v-h-when{white-space:normal}
}

/* ---------- рекомендации (этап 5) ---------- */
.v-r-table{min-width:640px}
.v-r-name{overflow-wrap:anywhere;min-width:180px}
.v-r-title{min-width:0;flex:1 1 240px}
.v-r-title h2{overflow-wrap:anywhere}
.v-ex{font-size:13px;border-left:2px solid var(--v-line);padding-left:8px;margin:4px 0;overflow-wrap:anywhere}
.v-r-prev{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--v-line)}
.v-r-fb{display:flex;flex-direction:column;gap:8px}
.v-r-fb .v-f{width:100%;max-width:100%;box-sizing:border-box}
.v-seg{display:inline-flex;border:1px solid var(--v-line);border-radius:6px;overflow:hidden}
.v-seg button{border:0;border-right:1px solid var(--v-line);background:var(--v-surface);color:var(--v-fg);padding:4px 8px;font-size:12px;white-space:nowrap}
.v-seg button:last-child{border-right:0}
.v-seg button.on{background:var(--v-accent);color:var(--v-accent-fg)}
.v-seg button:disabled{opacity:.4;cursor:not-allowed}
#page-v2recs .v-qitem .t{-webkit-line-clamp:2;font-weight:600}
.v-r-pct{font-family:var(--v-font-data);white-space:nowrap;flex:none}