/* Дизайн‑слой поверх style.css. Правила: шрифт Manrope (если есть), размеры только по шкале 12/14/16/18/20/24/30/36,
   отступы только 0/2/4/8/12/16/24/32/40/48/64/80/96, радиусы 8/12/16, плоские фоны без градиентов, тёмные поверхности из набора
   #000 #181818 #1F1F1F #272727 #313131 #131209, движение только transform и opacity по кривой cubic-bezier(0.22,1,0.36,1). */
@font-face { font-family: "Manrope"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("fonts/manrope-latin.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; }
:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px;
  --d0: #3A3E44; --d1: #454A51; --d2: #50565E; --d3: #646B74;
  --ink: #FFFFFF; --ink-2: #E3E6EA; --ink-3: #BDC3CB;
  --hud: #5CC8FF; --hud-2: #2F9BE0; --good: #4FE3A0; --bad-t: #FF7A8A; --warn-t: #FFD37A;
  --radius: 16px;
}
body { font-family: "Manrope", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 20px; font-style: normal; }
h1 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 0 0 var(--s2); text-wrap: balance; }
h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: var(--s5) 0 var(--s3); text-wrap: balance; }
h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
p, li { text-wrap: pretty; }
em, i, cite { font-style: normal; }
.sub-head { font-size: 14px; line-height: 20px; max-width: 680px; text-wrap: pretty; }
main { padding: var(--s5); }
.pagehead { margin-bottom: var(--s5); gap: var(--s4); }

/* карточки и кнопки: состояния и мягкое движение */
.card { border-radius: var(--r-2xl); padding: var(--s4) var(--s5); }
.btn { font-size: 14px; line-height: 20px; font-weight: 600; padding: var(--s2) var(--s3); border-radius: var(--r-lg);
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn.big { font-size: 16px; line-height: 24px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--hud-2); outline-offset: 2px; }
.badge { font-size: 12px; line-height: 16px; }
.nav a { transition: background-color .3s var(--ease), color .3s var(--ease); }
table.ytable th { font-size: 12px; line-height: 16px; letter-spacing: .04em; }
table.ytable td { font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
table.ytable tr:hover td { background: var(--soft); }
.skip { position: absolute; left: -9999px; } .skip:focus { left: var(--s4); top: var(--s2); background: #fff; padding: var(--s2) var(--s3); border-radius: var(--r-lg); z-index: 50; }

/* появление блоков при прокрутке: один раз, снизу вверх на 32px */
.rv { opacity: 0; transform: translateY(32px); }
.rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) { .rv { transform: none; } .rv.in { transition: opacity .3s linear; } .btn, .jv-card { transition: none !important; } }

/* «Гипотезы» и карточка товара: тёмная панель управления, голубые акценты у линий и цифр */
.jv { background: var(--d0); border: 1px solid var(--d3); border-radius: var(--r-2xl); padding: var(--s5); color: var(--ink-2); }
.jv a { color: var(--hud); } .jv h2, .jv h3 { color: var(--ink); }
.jv-muted { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.jv-h { font-size: 12px !important; line-height: 16px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3) !important; margin: var(--s6) 0 var(--s3) !important; font-weight: 600; }
.jv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.jv-kpi { background: var(--d1); border: 1px solid var(--d3); border-radius: var(--r-xl); padding: var(--s4); }
.jv-kpi span { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.jv-kpi b { display: block; margin-top: var(--s2); font-size: 30px; line-height: 36px; font-weight: 700; color: var(--hud); font-variant-numeric: tabular-nums; }
.jv-kpi b small { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.jv-kpi em { display: block; margin-top: var(--s1); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.jv-kpi em.up, .jv-delta.up { color: var(--good); } .jv-kpi em.down, .jv-delta.down { color: var(--bad-t); }
.jv-kpi.big { grid-column: span 2; }
.jv-st { font-size: 24px !important; line-height: 32px !important; } .jv-st.win { color: var(--good); } .jv-st.lose { color: var(--bad-t); } .jv-st.waiting { color: var(--warn-t); }
.jv-tabs { display: inline-flex; gap: var(--s1); padding: var(--s1); background: var(--d1); border: 1px solid var(--d3); border-radius: var(--r-xl); margin-bottom: var(--s5); flex-wrap: wrap; }
.jv-tabs a { padding: var(--s2) var(--s3); border-radius: var(--r-lg); color: var(--ink-2); text-decoration: none; font-weight: 600; transition: background-color .3s var(--ease), color .3s var(--ease); }
.jv-tabs a:hover { background: var(--d2); color: var(--ink); }
.jv-tabs a.on { background: var(--d3); color: var(--hud); }
.jv-tabs i { margin-left: var(--s1); color: var(--ink-3); }
.jv-filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s4); }
.jv-pill { padding: var(--s1) var(--s3); border-radius: 999px; border: 1px solid var(--d3); color: var(--ink-2) !important; text-decoration: none; font-size: 12px; line-height: 20px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.jv-pill:hover { background: var(--d2); } .jv-pill.on { background: var(--hud-2); border-color: var(--hud-2); color: #fff !important; }
.jv-filters input[type=search], .jv-logform input, .jv-logform select, .jv-logform textarea { background: var(--d1); border: 1px solid var(--d3); color: var(--ink); border-radius: var(--r-lg); padding: var(--s2) var(--s3); font: inherit; }
.jv-filters input[type=search] { min-width: 240px; }
.jv-note { background: var(--d1); border: 1px solid var(--d3); border-radius: var(--r-xl); padding: var(--s3) var(--s4); margin-bottom: var(--s5); max-width: 880px; color: var(--ink-2); }
.jv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--s4); align-items: start; }
.jv-card { display: flex; flex-direction: column; gap: var(--s2); background: var(--d1); border: 1px solid var(--d3); border-radius: var(--r-2xl); padding: var(--s5); text-decoration: none; color: var(--ink-2) !important;
  transition: transform .5s var(--ease), border-color .3s var(--ease); }
a.jv-card:hover { transform: translateY(-2px); border-color: var(--hud-2); }
.jv-card h3 { margin: 0; font-size: 18px; line-height: 28px; text-wrap: balance; }
.jv-card p { margin: 0; text-wrap: pretty; }
.jv-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.jv-chip { font-size: 12px; line-height: 16px; padding: var(--s1) var(--s2); border-radius: 999px; background: var(--d2); color: var(--ink-2); border: 1px solid var(--d3); font-weight: 600; }
.jv-chip.win { color: var(--good); } .jv-chip.lose { color: var(--bad-t); } .jv-chip.waiting { color: var(--warn-t); } .jv-chip.grp { color: var(--hud); }
.jv-chip.ev-ozon { color: var(--good); } .jv-chip.ev-cases { color: var(--warn-t); } .jv-chip.ev-logic { color: var(--ink-2); }
.jv-main { display: flex; justify-content: space-between; align-items: flex-end; margin-top: var(--s2); }
.jv-main small { display: block; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.jv-main b { font-size: 30px; line-height: 36px; color: var(--hud); font-variant-numeric: tabular-nums; }
.jv-delta { font-size: 24px; line-height: 32px; font-weight: 700; text-align: right; color: var(--ink-2); } .jv-delta small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3); }
.jv-meta { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--ink-3); } .jv-meta b { color: var(--hud); font-weight: 600; }
.jv-risk { color: var(--warn-t); font-size: 12px; line-height: 16px; }
.jv-src { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 12px; line-height: 16px; }
.jv-more summary { cursor: pointer; color: var(--hud); font-size: 12px; line-height: 16px; font-weight: 600; padding: var(--s1) 0; list-style: none; } .jv-more summary::-webkit-details-marker { display: none; }
.jv-more[open] summary { margin-bottom: var(--s2); } .jv-more > * + * { margin-top: var(--s2); }
.jv-facts { margin: 0; padding-left: var(--s4); } .jv-facts li { margin: var(--s1) 0; }
.jv-acts { display: flex; flex-direction: column; gap: var(--s2); align-items: stretch; margin-top: var(--s2); }
.jv-acts .btn { justify-content: flex-start; text-align: left; white-space: normal; background: var(--d2); color: var(--ink); border-color: var(--d3); }
.jv-acts .btn:hover { background: var(--d3); }
.jv-card > .btn { align-self: flex-start; margin-top: var(--s2); }
.jv-sub { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.jv-sev { width: 8px; height: 8px; border-radius: 999px; display: inline-block; margin-right: var(--s2); background: var(--warn-t); } .jv-sev.s3 { background: var(--bad-t); } .jv-sev.s1 { background: var(--ink-3); }
.jv-empty { grid-column: 1 / -1; padding: var(--s6); text-align: center; color: var(--ink-3); border: 1px dashed var(--d3); border-radius: var(--r-2xl); }
.jv-empty .btn { margin-top: var(--s3); }
.jv-log { display: grid; gap: var(--s2); } .jv-logrow { display: grid; grid-template-columns: 112px 200px 1fr; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-lg); background: var(--d1); text-decoration: none; color: var(--ink-2) !important; }
.jv-hint { padding: var(--s3) var(--s4); border-radius: var(--r-xl); border: 1px solid var(--d3); background: var(--d1); font-size: 16px; line-height: 24px; margin-bottom: var(--s4); max-width: 880px; }
.jv-hint.win { border-color: var(--good); } .jv-hint.lose { border-color: var(--bad-t); } .jv-hint.waiting { border-color: var(--warn-t); }
.jv-warn { padding: var(--s3) var(--s4); border-radius: var(--r-xl); border: 1px solid var(--warn-t); color: var(--warn-t); margin-bottom: var(--s4); }
.jv-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--s5); } @media (max-width: 1000px) { .jv-cols { grid-template-columns: 1fr; } }
.jv-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); }
.jv-chartbox { background: var(--d1); border: 1px solid var(--d3); border-radius: var(--r-xl); padding: var(--s3) var(--s4); } .jv-chartbox.main { border-color: var(--hud-2); }
.jv-ct { font-size: 12px; line-height: 16px; color: var(--ink-2); margin-bottom: var(--s1); font-weight: 600; } .jv-ct i { color: var(--good); margin-left: var(--s2); }
svg.hud-chart { width: 100%; height: 112px; display: block; } .jv-card svg.hud-chart { height: 72px; }
.hc-line { stroke: var(--hud); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(92, 200, 255, .8)); } .hc-area { fill: var(--hud); fill-opacity: .12; } .hc-grid { stroke: var(--d3); stroke-width: 1; }
.hc-start { stroke: var(--warn-t); stroke-width: 1.5; stroke-dasharray: 4 3; } .hc-mark { stroke: var(--ink-3); stroke-width: 1; } .hc-dot { fill: #fff; stroke: var(--hud-2); stroke-width: 2; }
.hc-ax { fill: var(--ink-3); font-size: 10px; } .hc-tag { fill: var(--warn-t); font-size: 10px; } .hc-empty { fill: var(--ink-3); font-size: 12px; }
.jv .table-wrap, .jv .table-wrap:has(> table.ytable) { background: var(--d1); border: 1px solid var(--d3); border-radius: var(--r-xl); box-shadow: none; overflow: auto; }
.jv .jv-table, .jv .jv-table tr, .jv .jv-table td { background: transparent !important; color: var(--ink); } .jv .jv-table th, .jv .table-wrap:has(> table.ytable) .ytable th { background: var(--d2) !important; color: var(--ink-3); }
.jv .jv-table td, .jv .jv-table th { border-color: var(--d3); } .jv .jv-table tr:hover td { background: var(--d2) !important; } .jv .jv-table tr.main td { font-weight: 700; color: var(--hud); }
.jv .jv-table .pos { color: var(--good); } .jv .jv-table .neg { color: var(--bad-t); }
.jv tr.colfilter th { background: var(--d1) !important; } .jv tr.colfilter input { background: var(--d0); border-color: var(--d3); color: var(--ink); }
.jv .colcount { color: var(--ink-3); }
.jv-side { background: var(--d1); border: 1px solid var(--d3); border-radius: var(--r-2xl); padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.jv-side h3 { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 var(--s3); font-weight: 600; } .jv-side p { margin: var(--s2) 0; }
.jv-logform { display: grid; gap: var(--s2); margin-bottom: var(--s4); } .jv-logform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.jv-timeline { border-left: 1px solid var(--d3); margin-left: var(--s1); padding-left: var(--s4); display: grid; gap: var(--s3); }
.jv-ev { position: relative; } .jv-dot { position: absolute; left: -21px; top: 6px; width: 8px; height: 8px; border-radius: 999px; background: var(--hud-2); }
.jv-ev.start .jv-dot { background: var(--warn-t); } .jv-ev.close .jv-dot { background: var(--good); } .jv-ev.auto .jv-dot { background: var(--ink-2); }
.jv-chg { color: var(--warn-t); font-size: 12px; line-height: 16px; word-break: break-word; }
#m-hypo .field { display: grid; gap: var(--s1); margin-bottom: var(--s3); font-size: 12px; font-weight: 600; } #m-hypo .row2 { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: var(--s3); } #m-hypo select[size] { height: 128px; }
#m-hypo input, #m-hypo select, #m-hypo textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) { main { padding: var(--s4); } .jv { padding: var(--s3); } .jv-grid { grid-template-columns: 1fr; } .jv-kpi.big { grid-column: auto; } .jv-logrow { grid-template-columns: 1fr; } }

/* Остатки и пополнение: по кластерам */
.cl-summary { margin-bottom: var(--s5); } .cl-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); } .cl-head h3 { margin: 0; }
.cl-sum tr.on td { background: var(--accent-soft); }
.cl-sum td:first-child a { text-decoration: none; }
.need { color: #17803d; font-weight: 700; }
.lv { display: inline-block; padding: 0 var(--s2); border-radius: 999px; font-weight: 600; }
.lv-bad { background: #fdecea; color: #b42318; } .lv-warn { background: #fff2dc; color: #9a5b00; } .lv-ok { background: #e5f5ea; color: #17803d; } .lv-excess { background: #e7effb; color: #1d5fbf; }
.cl-focus { margin-bottom: var(--s5); } .cl-focus .toolbar { margin-top: var(--s3); }
.cl-bar { margin-top: var(--s4); }
.cmx-wrap { max-height: 70vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2xl); }
table.cmx { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
table.cmx th, table.cmx td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); background: var(--card); font-size: 14px; line-height: 20px; white-space: nowrap; }
table.cmx thead th { position: sticky; top: 0; z-index: 2; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f6f8fb; }
table.cmx th a { color: inherit; text-decoration: none; } table.cmx th a:hover { color: var(--accent-dark); }
table.cmx .sticky { position: sticky; left: 0; z-index: 1; min-width: 220px; max-width: 280px; white-space: normal; box-shadow: 1px 0 0 var(--line); } table.cmx thead th.sticky { z-index: 3; }
table.cmx td.cell { text-align: center; min-width: 64px; font-variant-numeric: tabular-nums; }
table.cmx td.lv-bad { background: #fdecea; color: #b42318; } table.cmx td.lv-warn { background: #fff2dc; color: #9a5b00; } table.cmx td.lv-ok { background: #f1faf4; color: #17803d; } table.cmx td.lv-excess { background: #eef3fb; color: #1d5fbf; }
table.cmx tr:hover td:not(.sticky) { filter: brightness(.97); }

/* Малый переключатель внутри карточек */
.seg.mini { padding: 2px; font-size: 12px; }
.seg.mini a { padding: 3px 10px; min-height: 0; }
.hero-card .seg.mini { background: rgba(255,255,255,.12); }
.hero-card .seg.mini a { color: rgba(255,255,255,.8); }
.hero-card .seg.mini a.on { background: #fff; color: #0b1220; }

/* «Что изменили»: было → стало */
.jv-what { margin-bottom: var(--s5); }
.jv-what-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s3); } @media (max-width: 900px) { .jv-what-grid { grid-template-columns: 1fr; } }
.jv-what-card { background: var(--d1); border: 1px solid var(--d3); border-radius: var(--r-xl); padding: var(--s4); }
.jv-what-card > span { display: block; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: var(--s2); }
.jv-what-card p { margin: 0 0 var(--s2); }
.jv-diff + .jv-diff { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--d3); }
.jv-ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s2); }
.jv-ba > div { border-radius: var(--r-lg); padding: var(--s2) var(--s3); background: var(--d2); word-break: break-word; white-space: pre-wrap; }
.jv-ba i { display: block; font-style: normal; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.jv-ba .now { border-left: 3px solid var(--good); } .jv-ba .was { border-left: 3px solid var(--bad-t); }

/* Списки товаров и панель фильтров */
.lists-bar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--s3); }
.lchip { display: inline-flex; gap: var(--s1); align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, #dfe6ee); background: #fff; color: var(--text); text-decoration: none; font-size: 13px; line-height: 20px; cursor: pointer; transition: background-color .3s var(--ease); list-style: none; }
.lchip::-webkit-details-marker { display: none; } .lchip i { font-style: normal; color: var(--muted); font-size: 12px; }
.lchip:hover { background: var(--soft); } .lchip.on { background: var(--text); color: #fff; border-color: var(--text); } .lchip.on i { color: rgba(255,255,255,.7); }
.lchip.add { border-style: dashed; color: var(--muted); }
.lnew { position: relative; } .lnew[open] .lform { display: flex; }
.lform { display: none; position: absolute; z-index: 20; top: 38px; left: 0; min-width: 320px; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s3); background: #fff; border: 1px solid #dfe6ee; border-radius: var(--r-xl); box-shadow: 0 10px 30px rgba(20,30,50,.14); }
.lform + .lform { top: 38px; } .lform input { flex: 1; min-width: 160px; }
.fpanel { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; padding: var(--s3) var(--s4); margin-bottom: var(--s3); background: #fff; border: 1px solid #e3e9f1; border-radius: var(--r-xl); }
.fpanel .fld { display: flex; flex-direction: column; gap: var(--s1); margin: 0; }
.fpanel .fld > span { font-size: 12px; line-height: 16px; color: var(--muted); }
.fpanel .fld.wide { flex: 1 1 220px; } .fpanel .fld.wide input { width: 100%; }
.fpanel input, .fpanel select { min-height: 36px; box-sizing: border-box; }
.fpanel .rng { display: flex; align-items: center; gap: var(--s1); } .fpanel .rng input { width: 78px; } .fpanel .rng i { color: var(--muted); font-style: normal; }
.fpanel .fld input[type=number] { width: 104px; }
.fpanel .checks { gap: var(--s1); justify-content: center; } .fpanel .checks label { display: flex; gap: var(--s2); align-items: center; font-size: 13px; margin: 0; }
.fpanel .act { flex-direction: row; gap: var(--s2); align-items: center; }
.lsave { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-left: var(--s3); }
.lsave input[name=name] { min-width: 180px; }
.hero-card .lbl { flex-wrap: wrap; row-gap: 6px; }

/* Сотрудники и доступы */
.staff { display: grid; gap: var(--s3); }
.staffcard { padding: var(--s4); } .staffcard.off { opacity: .6; }
.staffhead { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.staffhead .ava { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.staffbody { margin-top: var(--s3); display: grid; gap: var(--s3); } .staffbody[hidden] { display: none; }
.presets, .permshops { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s2); }
.perm { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) var(--s3); border: 1px solid #e3e9f1; border-radius: var(--r-lg); background: #fff; margin: 0; cursor: pointer; }
.perm input { margin-top: 3px; } .perm span b { display: block; font-size: 14px; } .perm small { display: block; color: var(--muted); font-size: 12px; line-height: 16px; }
.perm:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.staffend { margin-top: var(--s3); }

/* Выбор товара: поиск, фото, размещение рекламы */
.flabel { display: block; font-size: 13px; color: var(--muted); margin-bottom: var(--s1); }
.pk { border: 1px solid #dfe6ee; border-radius: var(--r-xl); background: #fff; overflow: hidden; }
.pk-search { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); border-bottom: 1px solid #eef1f5; color: var(--muted); }
.pk-search svg.i { width: 18px; height: 18px; flex: none; } .pk-search input { border: 0 !important; box-shadow: none !important; outline: 0; flex: 1; min-height: 44px; background: transparent; }
.pk-chosen { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--accent-soft); border-bottom: 1px solid #dbe8f6; }
.pk-chosen > span:first-child { font-size: 12px; color: var(--accent-dark); font-weight: 700; } .pk-chosen[hidden], .pk-note[hidden] { display: none; }
.pk-note { padding: var(--s2) var(--s3); font-size: 12px; line-height: 16px; background: #fff8e6; color: #7a5a00; border-bottom: 1px solid #f3e6bd; }
.linkbtn { border: 0; background: none; color: var(--accent-dark); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.pk-list { max-height: 300px; overflow: auto; }
.pk-item { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f1f4f8; background: #fff; padding: var(--s2) var(--s3); cursor: pointer; font: inherit; color: var(--text); transition: background-color .3s var(--ease); }
.pk-item[hidden] { display: none; } .pk-item:hover { background: var(--soft); } .pk-item.on { background: #f1ede4; }
.pk-item img, .pk-ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.pk-chosen img, .pk-chosen .pk-ph { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.pk-tx { flex: 1; min-width: 0; } .pk-tx b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pk-tx small { display: block; color: var(--muted); font-size: 12px; line-height: 16px; }
.pk-badge { font-size: 11px; line-height: 16px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.pk-badge.s { background: #e6f0ff; color: #1f5fd6; } .pk-badge.r { background: #e5f6ec; color: #168a55; } .pk-badge.n { background: #f1f1f1; color: #7a7a7a; }
.pk-empty { padding: var(--s5); text-align: center; color: var(--muted); }

/* Фото товаров в блоках «Гипотез», фильтры рекомендаций */
.jv-ph { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: var(--d2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); border: 1px solid var(--d3); }
.jv-prod { display: flex; gap: var(--s3); align-items: center; } .jv-prod b { display: block; font-size: 14px; line-height: 20px; color: var(--ink); } .jv-prod small { display: block; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.jv-cands { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.jv-stack { display: inline-flex; align-items: center; } .jv-av { border: 0; padding: 0; background: none; cursor: pointer; margin-left: -8px; border-radius: 12px; transition: transform .3s var(--ease); } .jv-av:first-child { margin-left: 0; }
.jv-av .jv-ph { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; } .jv-av:hover { transform: translateY(-2px); z-index: 2; position: relative; }
.jv-more-n { margin-left: var(--s2); font-size: 12px; color: var(--ink-3); }
.jv-filters2 { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.jv-frow { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } .jv-frow > .jv-muted { min-width: 124px; }
.jv-pill i { margin-left: var(--s1); opacity: .7; }

/* Карточка предложения: товар → сигнал → действия, с подписями и разделителями */
.jv-card.adv { gap: var(--s4); }
.jv-sevl { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.jv-link { font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none; }
.jv-lab { display: block; font-size: 11px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: var(--s1); }
.jv-prod.strip { padding: var(--s3); border-radius: var(--r-xl); background: var(--d2); } .jv-prod.strip small.jv-lab { margin: 0; }
.jv-ph.lg { width: 56px; height: 56px; border-radius: 12px; }
.jv-sec { padding-top: var(--s3); border-top: 1px solid var(--d3); } .jv-sec h3 { margin: 0 0 var(--s2); font-size: 18px; line-height: 24px; color: var(--ink); }
.jv-facts li { color: var(--ink-2); font-size: 14px; line-height: 20px; }
.jv-acts .btn.act { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); width: 100%; text-align: left; font-weight: 600; background: var(--d1); color: var(--ink); border: 1px solid var(--d3); box-shadow: none; }
.jv-acts .btn.act i { color: var(--hud); font-weight: 700; } .jv-acts .btn.act:hover { background: var(--d2); border-color: var(--hud); }

/* Список поставок: понятные карточки с этапами */
.splist { display: grid; gap: var(--s4); margin-top: var(--s4); }
.spgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--s3); }
.sp[hidden], .spgroup[hidden] { display: none; }
.sp { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: var(--s4) var(--s5); display: grid; gap: var(--s4); box-shadow: 0 1px 2px rgba(20,20,30,.04); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sp:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,20,30,.08); }
.sp-head { display: flex; gap: var(--s3); align-items: center; }
.sp-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; flex: none; } .sp-ic svg.i { width: 22px; height: 22px; }
.sp-title { flex: 1; min-width: 0; } .sp-title a { display: block; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--text); text-decoration: none; text-wrap: balance; }
.sp-sub { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
.sp-num { display: flex; align-items: baseline; gap: var(--s1); white-space: nowrap; } .sp-num b { font-size: 24px; line-height: 28px; font-variant-numeric: tabular-nums; } .sp-num span { font-size: 12px; color: var(--muted); } .sp-num i { color: var(--muted); margin: 0 var(--s1); }
.sp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); list-style: none; padding: 0; margin: 0; position: relative; }
.sp-steps li { display: flex; flex-direction: column; align-items: center; gap: var(--s1); text-align: center; position: relative; font-size: 12px; line-height: 16px; color: var(--muted); }
.sp-steps li::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--line); z-index: 0; } .sp-steps li:first-child::before { display: none; }
.sp-steps li.done::before, .sp-steps li.now::before { background: #2fb36d; }
.sp-steps i { width: 28px; height: 28px; border-radius: 50%; background: #f1ede4; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; position: relative; z-index: 1; }
.sp-steps li.done i { background: #2fb36d; color: #fff; } .sp-steps li.now i { background: #15151a; color: #fff; box-shadow: 0 0 0 4px rgba(21,21,26,.1); } .sp-steps li.now, .sp-steps li.done { color: var(--text); font-weight: 600; }
.sp-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sp-meta { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: 13px; color: var(--muted); } .sp-meta span { display: inline-flex; gap: var(--s1); align-items: center; } .sp-meta svg.i { width: 15px; height: 15px; }
.sp-ok { color: #168a55; font-weight: 700; } .sp-bad { color: #c62f3a; font-weight: 700; }
.sp-cancel { padding: var(--s2) var(--s3); border-radius: var(--r-lg); background: #f1ede4; color: var(--muted); font-size: 13px; } .sp.cancelled { opacity: .7; }
.spgroup { background: var(--soft); border-radius: 24px; padding: var(--s4); display: grid; gap: var(--s3); }
.spgroup header { display: grid; gap: var(--s2); } .spgroup header b { display: block; font-size: 16px; line-height: 24px; } .spgroup header span { display: block; font-size: 13px; color: var(--muted); }
.spbar { height: 6px; border-radius: 3px; background: rgba(21,21,26,.1); overflow: hidden; } .spbar i { display: block; height: 100%; background: #2fb36d; border-radius: 3px; }

/* Реклама: вердикт, карточки-переключатели, полоса эффективности */
.verdict { border-radius: 18px; padding: var(--s4) var(--s5); margin-bottom: var(--s4); display: grid; gap: var(--s2); border: 1px solid; }
.verdict b { font-size: 16px; line-height: 24px; } .verdict > span { font-size: 14px; } .verdict ul { margin: 0; padding-left: var(--s4); font-size: 14px; } .verdict .btn { justify-self: start; }
.verdict.bad { background: #fdecec; border-color: #f4c9c9; color: #7a1f1f; } .verdict.bad a { color: #7a1f1f; font-weight: 700; }
.verdict.ok { background: #e3f4ea; border-color: #bfe3cd; color: #14573a; }
.mcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin-bottom: var(--s3); }
.mcard { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: var(--s4); cursor: pointer; font: inherit; color: var(--text); display: grid; gap: var(--s1); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.mcard:hover { transform: translateY(-2px); } .mcard span { font-size: 13px; color: var(--muted); } .mcard b { font-size: 26px; line-height: 32px; font-variant-numeric: tabular-nums; } .mcard small { font-size: 12px; color: var(--muted); line-height: 16px; }
.mcard.on { border-color: #15151a; box-shadow: 0 0 0 1px #15151a; }
.mcard.ok { background: #eaf6ee; } .mcard.warn { background: #fff5df; } .mcard.bad { background: #fdecec; }
.effcard { margin-bottom: var(--s4); }
.effbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #eee9dc; margin: var(--s3) 0; gap: 2px; } .effbar a { display: block; height: 100%; }
.e-ok { background: #2fb36d; } .e-edge { background: #f0a73a; } .e-loss { background: #e5484d; } .e-young { background: #b9b4a6; }
.efflegend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 13px; } .efflegend a { text-decoration: none; color: var(--text); display: inline-flex; gap: var(--s2); align-items: center; } .efflegend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
tr.rowloss td { background: #fff3f2; } tr.rowedge td { background: #fffaf0; }

/* Список поставок v2: меньше информации в карточке */
.sp { gap: var(--s3); padding: var(--s4); border-radius: 18px; }
.sp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); } .sp-name { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--text); text-decoration: none; text-wrap: balance; }
.sp-line { font-size: 14px; color: var(--muted); display: flex; gap: var(--s1); align-items: baseline; flex-wrap: wrap; } .sp-line b { color: var(--text); font-size: 16px; } .sp-line span { margin-left: auto; font-size: 12px; }
.sp-prog { height: 6px; border-radius: 3px; background: #eee9dc; overflow: hidden; } .sp-prog i { display: block; height: 100%; background: #15151a; border-radius: 3px; } .sp.booked .sp-prog i { background: #2fb36d; }
.sp-note { font-size: 13px; color: var(--muted); }
.spgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Очередь FBS: главное — что делать сегодня */
.fq-hero { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: var(--s5); margin-bottom: var(--s4); display: grid; gap: var(--s4); box-shadow: var(--glass-shadow); }
.fq-head { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; align-items: flex-start; } .fq-head h2 { margin: 0 0 var(--s1); font-size: 24px; line-height: 32px; } .fq-head p { margin: 0; color: var(--muted); }
.fq-refresh { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin: 0; }
.fq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); }
.fq-tile { background: #f6f3ea; border: 2px solid transparent; border-radius: 18px; padding: var(--s3) var(--s4); text-decoration: none; color: var(--text); display: grid; gap: 2px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
a.fq-tile:hover { transform: translateY(-2px); } .fq-tile b { font-size: 32px; line-height: 40px; font-variant-numeric: tabular-nums; } .fq-tile span { font-size: 13px; color: var(--muted); }
.fq-tile.pack { background: #fff4de; } .fq-tile.del { background: #e6eeff; } .fq-tile.on { border-color: #15151a; } .fq-tile.static { opacity: .85; }
.fq-filter { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; margin: 0; } .fq-filter label { display: inline-flex; gap: var(--s2); align-items: center; font-size: 13px; color: var(--muted); margin: 0; }
.sp-acts { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; justify-content: flex-end; } .sp-acts form { margin: 0; }
.spgact { margin: 0; } form.inline { display: inline; margin: 0; }

/* Очередь FBS v2: два списка с галочкой и лотком */
.fq-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.fq-line { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; } .fq-line b { color: var(--text); }
.fq-lists { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.fq-list { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--glass-shadow); overflow: hidden; }
.fq-list > header { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); }
.fq-all { margin: 0; display: inline-flex; padding: var(--s2); cursor: pointer; } .fq-all input { width: 22px; height: 22px; cursor: pointer; }
.fq-name { flex: 1; display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text); padding: var(--s2) 0; position: relative; }
.fq-name b { font-size: 20px; line-height: 28px; } .fq-name .cnt { font-size: 14px; font-weight: 700; padding: 2px 12px; border-radius: 999px; background: #eee9dc; } .fq-name small { color: var(--muted); font-size: 13px; }
.fq-list.pack .fq-name .cnt { background: #fff0d0; color: #8f5a00; } .fq-list.del .fq-name .cnt { background: #e6eeff; color: #1f5fd6; }
.fq-name .chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .3s var(--ease); }
.fq-list.open .chev { transform: rotate(-135deg); } .fq-list.open > header { border-bottom: 1px solid var(--line); }
.fq-tray { padding: 0; } .fq-tray[hidden] { display: none; } .fq-tray .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.fqbar { transition: transform .3s var(--ease); } .fqbar .fq-sum { margin-right: auto; } .fqbar button[hidden] { display: none; }
.barmore { position: relative; } .barmore summary { list-style: none; cursor: pointer; padding: var(--s2) var(--s3); border-radius: var(--r-lg); background: rgba(255,255,255,.12); font-weight: 600; font-size: 14px; } .barmore summary::-webkit-details-marker { display: none; }
.barmore-in { position: absolute; right: 0; bottom: 48px; background: #fff; color: var(--text); border-radius: var(--r-xl); padding: var(--s3); display: grid; gap: var(--s3); min-width: 280px; box-shadow: 0 16px 40px rgba(20,20,30,.25); }
.barmore-in label, .barmore-in .muted { color: var(--muted); }

/* Товар в списках: фото + артикул */
.pc { display: flex; gap: var(--s3); align-items: center; min-width: 0; } .pc .photo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.pc-t { display: grid; gap: 1px; min-width: 0; } .pc-t b { font-size: 14px; line-height: 20px; color: var(--text); } .pc-t a { text-decoration: none; } .pc-t small { font-size: 12px; line-height: 16px; color: var(--muted); }
.mcards.fl a.mcard { text-decoration: none; }
.posn { font-size: 18px; font-variant-numeric: tabular-nums; } .dlt { margin-left: var(--s2); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .dlt.bad { background: #fdecec; color: #c62f3a; } .dlt.ok { background: #e3f4ea; color: #168a55; }
.wfeed { display: grid; gap: var(--s1); } .wf { display: grid; grid-template-columns: 44px 160px auto 1fr; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-lg); text-decoration: none; color: var(--text); } .wf:hover { background: #f6f3ea; }
.wf .photo { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .wf-t b { display: block; font-size: 14px; } .wf-t small { color: var(--muted); font-size: 12px; } .wf-d { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wf-d b { color: var(--text); } .wf-d s { opacity: .7; }
@media (max-width: 860px) { .wf { grid-template-columns: 40px 1fr; } .wf .badge, .wf-d { grid-column: 2; } }
.jv-chip.fresh { background: #fff0d0; color: #8f5a00; border-color: #f0d9a6; }

/* Страница кампании: идеи и гипотезы */
.camp2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s4); margin-bottom: var(--s4); } @media (max-width: 960px) { .camp2 { grid-template-columns: 1fr; } }
.cidea { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.cidea-i { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-xl); text-decoration: none; color: var(--text); background: #fff; position: relative; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.cidea-i:hover { border-color: #15151a; transform: translateY(-1px); } .cidea-i b { font-size: 14px; line-height: 20px; } .cidea-i span { font-size: 13px; color: var(--muted); line-height: 18px; } .cidea-i em { font-style: normal; font-size: 12px; font-weight: 700; color: #1f5fd6; } .cidea-i i { position: absolute; right: var(--s3); top: var(--s3); font-style: normal; font-size: 11px; font-weight: 700; color: #8f5a00; background: #fff0d0; border-radius: 999px; padding: 1px 8px; } .cidea-i i:empty { display: none; }
.cexp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); } .cexp:last-child { border-bottom: 0; }
.cexp-t b { display: block; font-size: 13px; line-height: 18px; } .cexp-t small, .cexp-d small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.cexp-d { text-align: right; font-weight: 800; font-size: 16px; } .cexp-d.ok { color: #168a55; } .cexp-d.bad { color: #c62f3a; }
.nc-col.mk .flag { position: absolute; top: -2px; font-size: 12px; color: #c62f3a; } .nc-col { position: relative; }
.hi-prod { display: inline-flex; gap: var(--s2); align-items: center; } .hi-prod .photo { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.jv-camp { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-lg); background: var(--d2); color: var(--ink) !important; text-decoration: none; margin-bottom: var(--s2); font-weight: 600; } .jv-camp small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; }

.barmore-in { min-width: 320px; gap: var(--s4); } .bm-row { display: grid; gap: var(--s1); } .bm-row label { font-size: 13px; font-weight: 700; color: var(--text) !important; margin: 0; } .bm-row small { color: var(--muted); font-size: 12px; line-height: 16px; } .bm-row select { width: 100%; } .bm-row .btn { justify-self: start; background: #fff; color: var(--text); border: 1px solid #ddd8ca; }

/* Кнопка «скопировать» */
.cp { border: 0; background: transparent; padding: 2px; margin-left: 4px; border-radius: 6px; cursor: pointer; color: var(--muted); display: inline-flex; vertical-align: middle; opacity: .55; transition: opacity .2s var(--ease), background-color .2s var(--ease); }
.cp svg.i { width: 14px; height: 14px; } .cp:hover { opacity: 1; background: #f1ede4; color: var(--text); } .cp.ok { opacity: 1; color: #168a55; background: #e3f4ea; }
.pc-l { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }

/* Товары: карточки со склейкой */
.pc.big .photo { width: 56px; height: 56px; border-radius: 12px; } .cname { font-size: 14px; line-height: 20px; font-weight: 600; max-width: 380px; display: block; }
.alist { display: grid; gap: 4px; } .art { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; font-size: 13px; } .art-s { color: var(--muted); font-size: 12px; min-width: 90px; }
.art-x { border: 0; background: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; } .art-x:hover { color: #c62f3a; }

/* Трей с подробным расчётом товара */
tr.clk { cursor: pointer; } tr.clk:hover td { background: #faf8f2; }
.tray-back { position: fixed; inset: 0; background: rgba(20,20,30,.35); z-index: 80; } .tray-back[hidden], .tray[hidden] { display: none; }
.tray { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: #fff; z-index: 81; box-shadow: -20px 0 50px rgba(20,20,30,.2); padding: var(--s5); overflow-y: auto; transform: translateX(40px); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.tray.open { transform: none; opacity: 1; }
.tr-head { display: flex; gap: var(--s3); align-items: center; padding-right: 36px; margin-bottom: var(--s4); position: relative; } .tr-head .photo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--soft); flex: none; } .tr-head b { font-size: 18px; } .tr-head small { display: block; color: var(--muted); }
.tr-x { position: absolute; right: 0; top: 0; border: 0; background: #f1ede4; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.tr-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-bottom: var(--s4); } .tr-kpi > div { background: #f6f3ea; border-radius: 12px; padding: var(--s2) var(--s3); } .tr-kpi span { display: block; font-size: 11px; color: var(--muted); } .tr-kpi b { font-size: 15px; font-variant-numeric: tabular-nums; } .tr-kpi .bad b { color: #c62f3a; } .tr-kpi .ok b { color: #168a55; }
.tray h4 { margin: var(--s4) 0 var(--s2); font-size: 14px; } .tr-note { background: #fff4de; color: #8f5a00; border-radius: 10px; padding: var(--s2) var(--s3); font-size: 13px; }
.tr-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #eee9dc; gap: 1px; margin-bottom: var(--s3); } .tr-bar i { display: block; height: 100%; }
.tl { border-bottom: 1px solid var(--line); padding: var(--s2) 0; } .tl-h { display: grid; grid-template-columns: 1fr auto 64px; gap: var(--s3); align-items: baseline; } .tl-h b { font-variant-numeric: tabular-nums; } .tl-h em { font-style: normal; text-align: right; font-weight: 700; color: var(--muted); font-size: 13px; }
.tl small { color: var(--muted); font-size: 12px; display: block; } .tl.base .tl-h span, .tl.total .tl-h span { font-weight: 800; } .tl.total { border-bottom: 0; background: #f6f3ea; border-radius: 12px; padding: var(--s3); margin-top: var(--s2); }
.tl-sub { list-style: none; margin: 4px 0 0; padding: 0 0 0 var(--s3); border-left: 2px solid var(--line); display: grid; gap: 2px; } .tl-sub li { display: grid; grid-template-columns: 1fr auto 64px; gap: var(--s3); font-size: 12px; color: var(--muted); } .tl-sub b { font-weight: 600; color: var(--text); } .tl-sub em { font-style: normal; text-align: right; }
.tl.k1 .tl-h span::before, .tl.k2 .tl-h span::before, .tl.k3 .tl-h span::before, .tl.k4 .tl-h span::before, .tl.k5 .tl-h span::before, .tl.k6 .tl-h span::before, .tl.k7 .tl-h span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--dot); }
.tl.k1, .tr-bar .k1 { --dot: #8fb9da; } .tl.k2, .tr-bar .k2 { --dot: #3a9de0; } .tl.k3, .tr-bar .k3 { --dot: #7fd1c4; } .tl.k4, .tr-bar .k4 { --dot: #f2b866; } .tl.k5, .tr-bar .k5 { --dot: #c9a3e8; } .tl.k6, .tr-bar .k6 { --dot: #b9b4a6; } .tl.k7, .tr-bar .k7 { --dot: #e5484d; }
.tr-bar i { background: var(--dot, #ccc); } .tr-bar .k1 { background: #8fb9da; } .tr-bar .k2 { background: #3a9de0; } .tr-bar .k3 { background: #7fd1c4; } .tr-bar .k4 { background: #f2b866; } .tr-bar .k5 { background: #c9a3e8; } .tr-bar .k6 { background: #b9b4a6; } .tr-bar .k7 { background: #e5484d; }
.tr-foot { font-size: 12px; color: var(--muted); } .tr-act { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

/* Окно запуска гипотезы: шаги и «что сделает сервис» */
.modal.hm { width: min(1040px, 96vw); max-width: none; padding: 0; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.hm-head { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--s5) var(--s5) var(--s3); position: relative; } .hm-head h2 { margin: 2px 0 0; font-size: 24px; line-height: 32px; } .hm-head .tr-x { position: static; flex: none; }
.hm-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hm-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: var(--s5); padding: 0 var(--s5) var(--s4); overflow-y: auto; } @media (max-width: 900px) { .hm-cols { grid-template-columns: 1fr; } }
.hm-step { display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); } .hm-step:first-child { border-top: 0; }
.hm-n { width: 28px; height: 28px; border-radius: 50%; background: #15151a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.hm-c h3 { margin: 0 0 var(--s2); font-size: 16px; } .hm-hint { margin: 0 0 var(--s2); font-size: 13px; color: var(--muted); }
.hm-title { width: 100%; font-size: 15px; font-weight: 600; min-height: 44px; }
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: s; } .hm-steps li { background: #f6f3ea; border-radius: 12px; padding: var(--s3); font-size: 14px; line-height: 20px; } .hm-steps label { display: flex; gap: var(--s3); align-items: flex-start; margin: 0; cursor: pointer; } .hm-steps input { margin-top: 3px; flex: none; }
.hm-edit summary { cursor: pointer; font-size: 13px; color: var(--muted); margin-top: var(--s2); } .hm-edit textarea { width: 100%; margin-top: var(--s2); }
.hm-grid { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: var(--s3); } @media (max-width: 700px) { .hm-grid { grid-template-columns: 1fr; } }
.hm-days { display: flex; gap: 4px; align-items: center; } .hm-days button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; font-weight: 600; } .hm-days button.on { background: #15151a; color: #fff; border-color: #15151a; } .hm-days input { width: 64px; }
.hm-side { background: #f1ede4; border-radius: 20px; padding: var(--s4); align-self: start; position: sticky; top: 0; }
.hm-ai { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s3); } .hm-orb { width: 14px; height: 14px; border-radius: 50%; background: #3b6cf0; box-shadow: 0 0 0 4px rgba(59,108,240,.18), 0 0 14px rgba(59,108,240,.6); }
.hm-tl { list-style: none; margin: 0; padding: 0 0 0 var(--s3); border-left: 2px solid #d8d1c0; display: grid; gap: var(--s3); } .hm-tl li { position: relative; display: grid; gap: 2px; font-size: 13px; line-height: 18px; } .hm-tl li::before { content: ""; position: absolute; left: -19px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #3b6cf0; } .hm-tl b { font-size: 13px; } .hm-tl span { color: #4a4a55; }
.hm-foot { font-size: 12px; color: var(--muted); margin: var(--s3) 0 0; }
.hm-foot-bar { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: #fff; }

/* «Джарвис»: что нужно от вас сейчас */
.jarvis { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4) var(--s5); border-radius: 20px; margin-bottom: var(--s4); background: linear-gradient(135deg, #fff, #eef3ff); border: 1px solid #d6e2ff; box-shadow: 0 8px 24px rgba(59,108,240,.08); }
.jr-orb { width: 44px; height: 44px; border-radius: 50%; flex: none; position: relative; background: radial-gradient(circle at 35% 30%, #fff, #bcd0ff 45%, #3b6cf0); box-shadow: 0 0 0 6px rgba(59,108,240,.12), 0 0 24px rgba(59,108,240,.5); }
.jr-orb i { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(59,108,240,.4); animation: jr-ping 2.4s var(--ease) infinite; } @keyframes jr-ping { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .jr-orb i { animation: none; } }
.jr-body { flex: 1; min-width: 0; display: grid; gap: var(--s2); } .jr-title { font-size: 18px; line-height: 26px; color: #15151a; } .jr-calm { color: var(--muted); font-size: 14px; }
.jr-list { display: grid; gap: var(--s2); } .jr-item { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s3); align-items: center; background: #fff; border: 1px solid #e3e9f7; border-radius: 14px; padding: var(--s3); }
.jr-item b { display: block; font-size: 14px; line-height: 20px; color: #15151a; } .jr-item span:not(.jr-ic) { display: block; font-size: 13px; line-height: 18px; color: #4a4a55; }
.jr-ic { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: #fff4de; color: #8f5a00; } .jr-item.bad .jr-ic { background: #fdecec; color: #c62f3a; } .jr-item.done .jr-ic { background: #e3f4ea; color: #168a55; }
@media (max-width: 700px) { .jr-item { grid-template-columns: 32px 1fr; } .jr-item .btn { grid-column: 2; justify-self: start; } }
.hm-steps input[type=checkbox] { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; }
.hm-cols { flex: 1; min-height: 0; }
.modal .hm-steps input[type=checkbox] { width: 18px !important; height: 18px !important; min-height: 0 !important; padding: 0 !important; flex: none; }
.hm-steps li label { display: flex !important; gap: var(--s3); align-items: flex-start; } .hm-steps li label span { flex: 1; min-width: 0; }
.hm .pk-list { max-height: 220px; }

/* Что делать сейчас на странице гипотезы */
.nx { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: var(--s4); margin-bottom: var(--s4); display: grid; gap: var(--s3); }
.nx1 { border-color: #f0c36a; background: #fffaf0; } .nx3 { border-color: #9ad8bd; background: #effaf5; } .nx.bad { border-color: #f0a7ad; background: #fff5f5; }
.nx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); } @media (max-width: 700px) { .nx-steps { grid-template-columns: 1fr; } }
.nx-steps li { display: flex; gap: var(--s2); align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 10px; padding: var(--s2) var(--s3); flex-wrap: wrap; }
.nx-steps li small { font-weight: 500; font-size: 11.5px; color: var(--muted); margin-left: auto; }
.nx-steps i { width: 22px; height: 22px; border-radius: 50%; background: #e5e9ef; color: #5a6573; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 12px; }
.nx-steps li.now { color: var(--text); border-color: #0f9d6e; background: #fff; box-shadow: 0 0 0 1px #0f9d6e; } .nx-steps li.now i { background: #0f9d6e; color: #fff; } .nx-steps li.done i { background: #0f9d6e; color: #fff; } .nx-steps li.done { color: var(--text); }
.nx-main h2 { margin: 0 0 4px; font-size: 18px; line-height: 26px; } .nx-main p { margin: 0 0 var(--s2); color: #3a4452; max-width: 820px; }
.nx-todo { margin: 0 0 var(--s2); padding-left: var(--s5); display: grid; gap: 4px; } .nx-links { font-size: 13px; }
.nx-form { display: flex; gap: var(--s2); flex-wrap: wrap; } .nx-form input { flex: 1; min-width: 260px; }

.jv-verdict { margin: 0; font-size: 13px; line-height: 18px; background: #f1f4f7; border-left: 3px solid #10b981; border-radius: 6px; padding: 6px 10px; color: var(--ink-2); } .jv-verdict b { color: var(--ink); }
.hm-info { display: grid; gap: var(--s2); padding: var(--s3) 0 var(--s3) 44px; } .hm-info > div { background: #f6f8fa; border: 1px solid var(--line); border-radius: 10px; padding: var(--s2) var(--s3); }
.hm-info span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .hm-info p { margin: 2px 0 0; font-size: 13px; line-height: 18px; }
.hm-info .hm-verd { background: #effaf5; border-color: #bfe6d3; }

/* Куда подключить РК */
.ac-ins .ac-line { margin: 0 0 var(--s2); font-size: 14px; line-height: 20px; } .ac-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--s3); }
.ac-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: var(--s4); display: grid; gap: var(--s3); align-content: start; } .ac-card.t-go, .ac-card.t-boost { border-color: #9ad8bd; } .ac-card.t-stop, .ac-card.t-fix { border-color: #f1d49a; }
.ac-head { display: flex; gap: var(--s3); align-items: center; } .ac-id { flex: 1; min-width: 0; } .ac-id b { font-size: 15px; } .ac-id small { display: block; color: var(--muted); font-size: 12px; }
.ac-score { width: 64px; text-align: right; } .ac-score b { font-size: 22px; line-height: 26px; display: block; } .ac-score i { display: block; height: 4px; background: #10b981; border-radius: 2px; margin-top: 2px; }
.ac-title { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; } .ac-title h3 { margin: 0; font-size: 15px; }
.ac-why { margin: 0; padding-left: var(--s4); display: grid; gap: 4px; font-size: 13px; line-height: 18px; } .ac-why li.bad { color: #c8333f; font-weight: 600; } .ac-why li.muted { color: var(--muted); }
.ac-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.retcell { display: grid; gap: 2px; } .retcell input { width: 110px; } .bad-text { color: #c8333f; }

/* Куда подключить РК v2: плитки фактов, читаемые кнопки */
.jv a.btn, .jv a.btn:hover { color: #fff; text-decoration: none; } .jv a.btn.light { color: var(--text); }
.ac-list { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: var(--s3); }
.ac-card { padding: var(--s4); gap: var(--s3); } .ac-head .pill { flex: none; }
.ac-warn { background: #fff5f5; border: 1px solid #f4c9c9; border-radius: 10px; padding: var(--s2) var(--s3); } .ac-warn p { margin: 0; color: #a82d2d; font-size: 13px; line-height: 18px; } .ac-warn p + p { margin-top: 4px; }
.ac-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s2); }
.ac-f { background: #f6f8fa; border: 1px solid var(--line); border-radius: 10px; padding: var(--s2) var(--s3); display: grid; gap: 1px; } .ac-f span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ac-f b { font-size: 16px; line-height: 22px; font-variant-numeric: tabular-nums; } .ac-f small { font-size: 11.5px; color: var(--muted); }
.ac-f.good { background: #effaf5; border-color: #bfe6d3; } .ac-f.good b { color: #0b8a5f; } .ac-f.bad { background: #fff5f5; border-color: #f4c9c9; } .ac-f.bad b { color: #c8333f; } .ac-f.warn { background: #fffaf0; border-color: #f1d49a; } .ac-f.warn b { color: #8f5a00; }
.ac-more summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; } .ac-more summary::-webkit-details-marker { display: none; } .ac-more summary::before { content: "▸ "; } .ac-more[open] summary::before { content: "▾ "; }
.ac-why { margin-top: var(--s2); }
.ac-foot { padding-top: var(--s3); border-top: 1px solid var(--line); } .ac-btn { background: #0f9d6e; border-color: #0f9d6e; color: #fff; font-weight: 600; }

/* Алгоритм сам вносит правку: было → станет */
.nx-plan { display: grid; gap: var(--s2); margin-bottom: var(--s2); } .nx-chg { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: var(--s2) var(--s3); display: grid; gap: 4px; } .nx-chg small { color: var(--muted); }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } .ba > div { border-radius: 8px; padding: var(--s2) var(--s3); word-break: break-word; font-size: 13px; } .ba i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.ba .was { background: #fdecec; border-left: 3px solid #e5484d; } .ba .now { background: #e3f6ee; border-left: 3px solid #10b981; }
.nx-reason { color: #8f5a00; background: #fff4dc; border-radius: 8px; padding: var(--s2) var(--s3); } .nx-own { margin-top: var(--s2); } .nx-own summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.op { padding: var(--s2) 0; border-bottom: 1px solid var(--d3); display: grid; gap: 4px; } .op:last-child { border-bottom: 0; } .op s { opacity: .7; }
.hm-exec { margin: var(--s2) 0 var(--s3) 44px; background: #effaf5; border: 1px solid #bfe6d3; border-radius: 12px; padding: var(--s3); display: grid; gap: var(--s2); } .hm-exec[hidden] { display: none; }
.hm-apply { display: flex; gap: var(--s2); align-items: flex-start; font-size: 13px; margin: 0; cursor: pointer; } .hm-apply input { width: 18px !important; height: 18px !important; min-height: 0 !important; flex: none; margin-top: 2px; }