:root {
  --bg: #0e1116; --panel: #161b22; --line: #232b36; --fg: #e6edf3;
  --muted: #8b949e; --audio: #3fb950; --audio-dim: #1f6f34;
  --text: #58a6ff; --text-dim: #1f4f80; --warn: #d29922; --off: #4a5058;
}
* { box-sizing: border-box; }
/* Атрибут hidden мусить вигравати завжди: клас із display (.wiz-back, .dl-side)
   інакше перебиває UA-правило [hidden] і елемент лишається на екрані — так порожня
   коробка майстра затуляла й блокувала весь інтерфейс. */
[hidden] { display: none !important; }
/* Клас .hidden теж мусить вигравати завжди: інакше .vhid{display:grid} чи
   .side-x{display:block} лишали б елемент на екрані (оверлей входу не ховався). */
.hidden { display: none !important; }
body {
  margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 64px; max-width: 1000px;
  background: var(--bg); color: var(--fg);
  font: 15px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
}

h1 { margin: 0; font-size: 26px; font-weight: 700; }
h1 .sub, h2 .sub { color: var(--muted); font-weight: 400; font-size: 0.7em; }
.tag { color: var(--muted); margin: 6px 0 0; max-width: 68ch; }
.ro { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--line);
      border-radius: 999px; font-size: 12px; color: var(--muted); }
h2 { font-size: 16px; margin: 32px 0 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
small { color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.card .n { font-size: 28px; font-weight: 700; line-height: 1.1; }
.card .l { color: var(--fg); font-size: 13px; margin-top: 4px; }
.card .h { color: var(--muted); font-size: 12px; margin-top: 2px; }

.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }
.tools.pipe { margin-top: 8px; }
.tool { display: flex; align-items: center; gap: 9px; background: var(--panel);
        border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.tool .tl-l { flex: 1; font-size: 13px; display: flex; flex-direction: column; }
.tool .tl-l small { color: var(--muted); font-size: 11px; }
.tool .tl-n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--off); }
.tl-dot.live { background: var(--audio); box-shadow: 0 0 6px var(--audio); }
.tl-dot.ready { background: var(--text); }
.tl-dot.sibling { background: #a371f7; }
.tl-dot.ahead { background: var(--warn); }
.tl-dot.off, .tl-dot.none { background: var(--off); }
.legend .tl-dot { display: inline-block; margin: 0 5px 0 12px; vertical-align: middle; }

.perday { display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; }
.row .day { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.row .bar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: #11161d; }
.seg { height: 100%; }
.seg.audio { background: var(--audio-dim); }
.seg.text { background: var(--text-dim); }
.row .val { font-variant-numeric: tabular-nums; font-size: 13px; }
.legend { color: var(--muted); font-size: 12px; margin-top: 8px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 5px 0 12px; vertical-align: middle; }
.sw.audio { background: var(--audio-dim); } .sw.text { background: var(--text-dim); }

/* Модель поля — етап 2. Вага показана смугою, бо число саме по собі не
   порівнюється оком; стан кольором, бо він важить більше за вагу. */
.nodes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.node { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
        padding: 12px 14px; border-left: 3px solid var(--off); }
.node.forma { border-left-color: var(--audio); }
.node.tema  { border-left-color: var(--text); }
.node.shum  { border-left-color: var(--off); opacity: .62; }
.node .nh { display: flex; align-items: baseline; gap: 10px; }
.node .w { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; min-width: 46px; }
.node .ti { flex: 1; font-size: 14px; }
.node .st-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.node .sut { color: var(--muted); font-size: 13px; margin-top: 4px; }
.node .wbar { height: 4px; border-radius: 2px; background: #11161d; margin-top: 8px; overflow: hidden; }
.node .wbar i { display: block; height: 100%; background: var(--text-dim); }
.node.forma .wbar i { background: var(--audio-dim); }
.node .meta { color: var(--muted); font-size: 12px; margin-top: 6px;
              display: flex; gap: 14px; flex-wrap: wrap; }
.node details { margin-top: 8px; }
.node summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.node blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--line);
                   color: var(--fg); font-size: 13px; }
.node blockquote small { display: block; color: var(--muted); margin-top: 2px; }
.st { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 5px 0 12px; vertical-align: middle; }
.st.forma { background: var(--audio); } .st.tema { background: var(--text); } .st.shum { background: var(--off); }
.empty { color: var(--muted); font-size: 13px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--off); }
.dot.live { background: var(--audio); box-shadow: 0 0 6px var(--audio); }
.dot.slow, .dot.idle { background: var(--warn); }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--muted); }
.badge.live { color: var(--audio); border-color: var(--audio-dim); }
.badge.slow, .badge.idle { color: var(--warn); border-color: var(--warn); }

.recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.recent li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pill { font-size: 11px; text-align: center; border-radius: 4px; padding: 2px 0; height: fit-content; }
.pill.audio { background: var(--audio-dim); color: #d7f5df; }
.pill.text { background: var(--text-dim); color: #d6e9ff; }
.recent .t { font-size: 14px; }
.recent .m { grid-column: 2; color: var(--muted); font-size: 12px; }

footer { color: var(--muted); font-size: 12px; margin-top: 48px; border-top: 1px solid var(--line); padding-top: 16px;
         display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ── тижнева ретроспектива ──
   Рекомендація «рано» показується нарівні з рештою: чесне «ще не час» варте
   стільки ж, скільки «будуй», і без нього список перетворюється на список бажань. */
.retro { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-top: 14px; }
.rt-head { display: flex; align-items: baseline; gap: 12px; }
.rt-when { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.rt-n { color: var(--muted); font-size: 12px; }
.rt-sum { margin: 10px 0 0; font-size: 14px; line-height: 1.55; }
.rt-nums { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 4px;
           padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rt-nums span { display: flex; flex-direction: column; color: var(--muted); font-size: 12px; }
.rt-nums b { font-size: 20px; color: var(--fg); font-variant-numeric: tabular-nums; }

.rec { margin-top: 12px; padding: 12px 14px; border-radius: 8px;
       background: #11161d; border-left: 3px solid var(--off); }
.rec.fix { border-left-color: var(--warn); }
.rec.new { border-left-color: var(--audio); }
.rec.wait { border-left-color: var(--off); }
.rec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rec-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
         padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--muted); }
.rec.fix .rec-k { background: var(--warn); color: #1a1204; }
.rec.new .rec-k { background: var(--audio); color: #06210f; }
.rec-h b { font-size: 15px; }
.rec-why { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.rec-how { margin: 6px 0 0; font-size: 13px; }
.rec-how b { color: var(--fg); }

.rt-moved { margin-top: 14px; }
.rt-moved summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.mv { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: baseline;
      padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mv-w { font-variant-numeric: tabular-nums; color: var(--audio); font-weight: 700; }
.mv-t em { font-style: normal; color: var(--audio); font-size: 11px; }
.mv-m { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ── кільце ──
   Конвеєр показаний колом, бо він і є коло. Крок із нулем приглушений: порожній
   етап є затором, і його видно без пояснень. */
.ringbox { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: center; margin-top: 14px; }
@media (max-width: 720px) { .ringbox { grid-template-columns: 1fr; } }
.ring { width: 320px; height: 320px; }
.ring .arc { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ring .ahead-f { fill: var(--line); }
.ring .st-g circle { fill: var(--panel); stroke: var(--off); stroke-width: 2; }
.ring .st-g.on circle { stroke: var(--audio); }
.ring .st-g { opacity: .45; }
.ring .st-g.on { opacity: 1; }
.ring .st-v { text-anchor: middle; fill: var(--fg); font-size: 17px; font-weight: 700;
              font-variant-numeric: tabular-nums; }
.ring .st-t { text-anchor: middle; fill: var(--muted); font-size: 9px; text-transform: uppercase;
              letter-spacing: .06em; }
.ring-legend { display: flex; flex-direction: column; gap: 8px; }
.ring-legend div { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.ring-legend b { min-width: 32px; font-size: 17px; font-variant-numeric: tabular-nums; }
.ring-legend span { color: var(--muted); }
.ring-when { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* ── дошка ── */
.board { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bi { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--off);
      border-radius: 10px; padding: 14px 16px; }
.bi.fix { border-left-color: var(--warn); }
.bi.new { border-left-color: var(--audio); }
.bi.s-зроблено, .bi.s-відхилено { opacity: .5; }
.bi-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bi-h b { flex: 1; font-size: 15px; min-width: 200px; }
.bi-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px;
        border-radius: 999px; background: var(--line); color: var(--muted); }
.bi.fix .bi-k { background: var(--warn); color: #1a1204; }
.bi.new .bi-k { background: var(--audio); color: #06210f; }
.bi-w { color: var(--audio); font-size: 12px; font-weight: 700; }
.bi-s { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.bi-why { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.bi-how { margin: 6px 0 0; font-size: 13px; }
.bi-how b { color: var(--fg); }
.bi-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.bi-acts button { background: none; border: 1px solid var(--line); color: var(--fg);
                  border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.bi-acts button:hover { border-color: var(--audio); color: var(--audio); }

/* ── звіт ──
   Перше, що читається. Текст, не таблиця: розмір і міжрядковий інтервал більші
   за решту панелі свідомо — це те, заради чого сюди заходять. */
.report { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
          padding: 24px 26px; margin-top: 24px; }
.rp-h { margin: 0 0 14px; border: none; padding: 0; font-size: 17px; }
.rp-p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; max-width: 74ch; }
.rp-p b { color: var(--fg); }
.rp-warn { color: var(--warn); }
.rp-quote { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--text-dim);
            background: #11161d; border-radius: 0 8px 8px 0;
            font-size: 14px; line-height: 1.65; color: var(--fg); max-width: 74ch; }
.rp-rec { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px;
          padding: 12px 14px; margin: 0 0 8px; border-radius: 8px;
          background: #11161d; border-left: 3px solid var(--off); }
.rp-rec.fix { border-left-color: var(--warn); }
.rp-rec.new { border-left-color: var(--audio); }
.rp-k { grid-row: 1; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
        padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--muted);
        height: fit-content; }
.rp-rec.fix .rp-k { background: var(--warn); color: #1a1204; }
.rp-rec.new .rp-k { background: var(--audio); color: #06210f; }
.rp-rec b { grid-row: 1; font-size: 15px; }
.rp-rec span:not(.rp-k) { grid-column: 2; color: var(--muted); font-size: 13px; line-height: 1.55; }
.rp-go { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.rp-go a { color: var(--text); }
.live-a { color: var(--audio); border-color: var(--audio-dim); text-decoration: none; }
.bi-hist { margin-top: 10px; }
.bi-hist summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.bi-hist .hi { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 6px 0;
               border-bottom: 1px solid var(--line); font-size: 13px; }
.bi-hist .hi span { color: var(--muted); font-variant-numeric: tabular-nums; }
.bi-hist .hi-n { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

/* ── резервні копії ── */
.vt-nums { display: flex; gap: 26px; flex-wrap: wrap; margin: 14px 0;
           padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vt-nums span { display: flex; flex-direction: column; color: var(--muted); font-size: 12px; }
.vt-nums b { font-size: 24px; color: var(--fg); font-variant-numeric: tabular-nums; }
.vt-nums .bad b { color: #f85149; }
.vt-nums .warn b { color: var(--warn); }
.vt-nums .ok b { color: var(--audio); }
.vt-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.vt-mi { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--audio);
         border-radius: 8px; padding: 10px 12px; }
.vt-mi b { display: block; font-size: 14px; }
.vt-mi span { color: var(--muted); font-size: 12px; }

/* ── встановлення ── */
.inst { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.in-i { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.in-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.in-h b { font-size: 15px; }
.in-h span { color: var(--muted); font-size: 13px; }
.in-n { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.in-c { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.in-c code { flex: 1; background: #0b0f14; border: 1px solid var(--line); border-radius: 6px;
             padding: 8px 10px; font-size: 12px; overflow-x: auto; white-space: nowrap; color: var(--fg); }
.in-c button { background: none; border: 1px solid var(--line); color: var(--muted);
               border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12px;
               cursor: pointer; white-space: nowrap; }
.in-c button:hover { border-color: var(--audio); color: var(--audio); }
.in-r { margin-top: 8px; color: var(--muted); font-size: 12px; }
.in-r code { background: #0b0f14; border-radius: 4px; padding: 2px 7px; font-size: 12px; }
.in-w { margin: 6px 0 0; color: var(--warn); font-size: 12px; }

/* ── три етапи ──
   Головна не показує все — вона показує ТРИ ДВЕРІ. Кожні з трьома числами:
   рівно стільки, щоб зрозуміти, чи туди зараз варто заходити. */
.view.hidden { display: none; }
.home-a { color: inherit; text-decoration: none; }
.home-a:hover { color: var(--audio); }
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 14px; margin: 24px 0; }
.stg { display: flex; flex-direction: column; text-decoration: none; color: inherit;
       background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--audio);
       border-radius: 14px; padding: 20px 22px; transition: transform .12s, border-color .12s; }
.stg:hover { transform: translateY(-2px); border-color: var(--audio); }
.stg-n { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.stg b { font-size: 22px; margin: 4px 0 2px; letter-spacing: -.02em; }
.stg-s { color: var(--muted); font-size: 13px; }
.stg-v { display: flex; gap: 18px; margin: 16px 0 0; flex-wrap: wrap; }
.stg-v span { display: flex; flex-direction: column; color: var(--muted); font-size: 11px; }
.stg-v b { font-size: 20px; color: var(--fg); font-variant-numeric: tabular-nums; margin: 0; }
.stg-v .bad b { color: #f85149; }
.stg-v .warn b { color: var(--warn); }
.stg-v .ok b { color: var(--audio); }
.stg-go { margin-top: 14px; color: var(--audio); font-size: 13px; }

/* ── продукти ── */
.pr { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--audio);
      border-radius: 12px; padding: 18px 20px; margin-top: 12px; }
.pr-h { display: flex; align-items: baseline; gap: 14px; }
.pr-h b { font-size: 18px; flex: 1; }
/* Стан продукту, не посилання на нього: панель показує, ЩО збудовано, і не
   веде туди — продукт живе окремо й на іншій адресі свідомо. */
.pr-state { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pr-nums { display: flex; gap: 24px; flex-wrap: wrap; margin: 12px 0; }
.pr-nums span { display: flex; flex-direction: column; color: var(--muted); font-size: 12px; }
.pr-nums b { font-size: 22px; color: var(--fg); font-variant-numeric: tabular-nums; }
.pr-bars .w-row { display: grid; grid-template-columns: 44px 1fr 30px; gap: 10px;
                  align-items: center; font-size: 12px; color: var(--muted); padding: 3px 0; }
.pr-bars .bar { height: 7px; border-radius: 4px; background: #11161d; overflow: hidden; }
.pr-bars .bar i { display: block; height: 100%; background: var(--audio); }
.pr-v { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pr-v p { margin: 0 0 8px; font-size: 14px; padding-left: 12px; border-left: 2px solid var(--audio); }
.pr-v small { color: var(--muted); font-size: 12px; }
.pr-none { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
/* Рід «робота» — операційне, заведене рукою. Окремий колір, бо це не пропозиція
   моделі, а те, без чого система не працює як годинник. */
.bi.work { border-left-color: var(--text); }
.bi.work .bi-k { background: var(--text); color: #04182e; }
/* Здоровʼя. Мовчить, коли гаразд — постійна зелена табличка привчає її не бачити. */
.health { margin-top: 18px; }
.hl { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
      border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.hl.ok { background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.hl.ok b { color: var(--muted); font-weight: 400; }
.hl.bad { background: #2a1416; border: 1px solid #5c2327; color: #f85149; }
.hl.bad b { color: #f85149; }

/* ── теми ──
   Питання «що воно слухає» ставлять першим, а число «14/25 джерел» на нього не
   відповідає. Тема згорнута за замовчуванням: спершу — про що проєкт, і лише
   на клац — хто саме це годує. */
.temy { display: flex; flex-direction: column; gap: 8px; }
.tema { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.tema summary {
  cursor: pointer; padding: 14px 16px; list-style: none;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.tema summary::-webkit-details-marker { display: none; }
.tema summary::before { content: "▸"; color: var(--muted); }
.tema[open] summary::before { content: "▾"; }
.tema summary b { font-size: 16px; }
.tema-pro { color: var(--muted); font-size: 13px; flex: 1; min-width: 180px; }
.tema-num { color: var(--muted); font-size: 13px; white-space: nowrap; }
.tema-num b { color: var(--fg); font-variant-numeric: tabular-nums; }

.tema-src { margin: 0; padding: 0 16px 14px; list-style: none; }
.tema-src li {
  display: grid; grid-template-columns: 12px 1fr auto 56px 72px; gap: 10px;
  align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px;
}
.ts-u { color: var(--muted); font-size: 12px; }
.ts-i { text-align: right; font-variant-numeric: tabular-nums; }
.ts-a { text-align: right; color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  .tema-src li { grid-template-columns: 12px 1fr auto; }
  .ts-u, .ts-a { display: none; }
}

/* ── про що це ──
   Панель відкривали й бачили числа, не знаючи, чого вони стосуються. Задум
   стоїть перед числами, бо число без задуму не читається взагалі. */
.pro { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
       padding: 16px 22px; margin-bottom: 18px; }
.pro > summary {
  cursor: pointer; list-style: none; font-size: 17px; font-weight: 700;
  display: flex; align-items: baseline; gap: 8px;
}
.pro > summary::-webkit-details-marker { display: none; }
.pro > summary::before { content: "▸ "; color: var(--muted); font-weight: 400; }
.pro[open] > summary::before { content: "▾ "; }
.pro[open] > summary { margin-bottom: 10px; }
.pro-hint { font-weight: 400; font-size: 13px; color: var(--muted); }
.pro h2 { margin: 0 0 10px; font-size: 17px; }
.pro p { margin: 0 0 10px; line-height: 1.6; max-width: 68ch; }
.pro p:last-child { margin-bottom: 0; }
.pro-m { color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 10px; }

/* ── команда синтезу ──
   Кнопки «запустити» немає свідомо: команду копіюють рукою, і рахує машина
   людини її ключем. Контроль лишається там, де має бути. */
.cmd { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
       padding: 12px 14px; margin-bottom: 10px; }
.cmd-h { color: var(--muted); font-size: 12px; text-transform: uppercase;
         letter-spacing: .05em; margin-bottom: 6px; }
.cmd code { display: block; font-size: 13px; word-break: break-all; line-height: 1.5; }
.cmd-c { margin-top: 8px; background: none; border: 1px solid var(--line); color: var(--muted);
         border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.cmd-c:hover { border-color: var(--muted); color: var(--fg); }
.cmd-n { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 10px 0 0; }

/* ── історія прогонів ── */
.sesii { display: flex; flex-direction: column; gap: 10px; }
.ses { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ses-h { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ses-h span { color: var(--muted); font-size: 13px; }
.ses-v { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.ses-v span { display: flex; flex-direction: column; color: var(--muted); font-size: 12px; }
.ses-v b { font-size: 19px; color: var(--fg); font-variant-numeric: tabular-nums; }
.ses-d { margin-top: 10px; }
.ses-d summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.ses-d pre { margin: 8px 0 0; padding: 10px; background: var(--bg); border-radius: 8px;
             font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; }

/* ── ціна ──
   Названа наперед, а не після рахунку. Людина натискає команду й витрачає свої
   гроші — цифра має стояти поруч із командою, не в чиїйсь голові. */
.cina { margin-top: 14px; padding: 14px 16px; border-radius: 12px;
        background: var(--card); border: 1px solid var(--line); }
.cina > b { display: block; font-size: 14px; margin-bottom: 10px; }
.cina-v { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.cina-v span { display: flex; flex-direction: column; color: var(--muted); font-size: 12px; }
.cina-v b { font-size: 20px; color: var(--fg); font-variant-numeric: tabular-nums; }
.cina p { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 62ch; }
.cina p:last-child { margin-bottom: 0; }

/* ── згорнуті розділи ──
   Теми відповідають на головне питання; плаский перелік поруч із ними переказує
   те саме вдруге. Він лишається — але не займає екран у того, хто його не
   шукає. */
.zghorn { margin-bottom: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.zghorn > summary {
  cursor: pointer; list-style: none; font-size: 15px; font-weight: 600;
  padding: 6px 0; color: var(--muted);
}
.zghorn > summary::-webkit-details-marker { display: none; }
.zghorn > summary::before { content: "▸ "; }
.zghorn[open] > summary::before { content: "▾ "; }
.zghorn[open] > summary { color: var(--fg); margin-bottom: 10px; }
.zghorn > summary span { font-weight: 400; font-size: 13px; }
tr.off-row { opacity: .5; }

/* ── рух ──
   Правило просте: показувати, що щось відбулось, ЛИШЕ коли воно справді
   відбулось. Ніякої анімації «для жвавості» — вона бреше однаково добре і в
   працюючої системи, і в тієї, що стала пів дня тому. Крапка блимає рівно
   тоді, коли за останню годину справді щось прийшло. */
@keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); }
                  50% { opacity: .35; transform: scale(.7); } }
.pulse { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px;
         border-radius: 50%; background: var(--ok, #4ade80); animation: puls 2.4s ease-in-out infinite; }
.card { position: relative; }
.card .n em { display: block; font-size: 12px; font-weight: 400;
              color: var(--ok, #4ade80); font-style: normal; margin-top: 2px; }

/* Стрічка за добу. Порожні години малюються теж — саме провал і показує, що
   щось стало; рівний ряд без провалів не читався б як робота. */
.pul { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-bottom: 8px; }
.pul-b { flex: 1; background: var(--accent, #4ade80); border-radius: 2px 2px 0 0;
         min-height: 4px; transition: height .4s ease; }
.pul-b.nul { background: var(--line); }
.pul-n { color: var(--muted); font-size: 13px; margin: 0; }
.pul-n b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* Тема, у якій щойно щось прийшло, позначена — але не кричить. */
.tema.zhyva > summary::after { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok, #4ade80); animation: puls 2.4s ease-in-out infinite; }
.tema-num em { color: var(--ok, #4ade80); font-style: normal; font-size: 12px; margin-right: 8px; }
.tema-num em.teper { font-weight: 600; }
.ts-i em { color: var(--ok, #4ade80); font-style: normal; font-size: 11px; margin-left: 4px; }
.cmd-c.ok { border-color: var(--ok, #4ade80); color: var(--ok, #4ade80); }


/* ── ЄДИНИЙ ХЕДЕР ──────────────────────────────────────────────────────────
   Один і той самий на панелі, схемі й моніторі. Місця кнопок НЕ міняються між
   сторінками: людина, що звикла тягтись у правий верхній кут по «монітор», має
   знаходити його там завжди. Стрибок навігації між сторінками — те, за що це
   й переробили. */
.hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 24px 0 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.hdr-home { text-decoration: none; color: inherit; font-size: 20px; }
.hdr-home b { font-weight: 700; }
.hdr-home:hover b { color: var(--audio); }
.hdr-sub { color: var(--muted); font-weight: 400; font-size: 14px; }
.hdr-nav { display: flex; gap: 4px; }
.hdr-nav a {
  color: var(--muted); text-decoration: none; font-size: 14px;
  padding: 6px 12px; border-radius: 8px;
}
.hdr-nav a:hover { color: var(--fg); background: var(--card); }
.hdr-nav a.on { color: var(--fg); background: var(--card); font-weight: 600; }

/* ── кабінет директора ─────────────────────────────────────────────────── */
.knopka {
  display: inline-block; padding: 10px 18px; border-radius: 9px;
  background: var(--accent, #2f81f7); color: #fff; font-weight: 600;
  font-size: 14px; text-decoration: none;
}
.knopka:hover { filter: brightness(1.08); text-decoration: none; }
.inst-s { color: var(--muted); font-size: 12px; margin-left: 12px; }
.tag-uv {
  margin-top: 12px; border-left: 3px solid #d29922; padding: 8px 12px;
  background: rgba(210, 153, 34, .08); border-radius: 0 8px 8px 0;
}

/* ════════ ТОПІКИ-FIRST + БОКОВЕ МЕНЮ (перебудова 2026-08-04) ════════ */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

/* ── бокове меню — пульт ── */
.side {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 3px;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 14px; text-decoration: none; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand b { font-size: 18px; letter-spacing: .2px; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.logo { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--text), #7aa2ff); }
.snav { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.snav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
  color: var(--muted); font-weight: 500; text-decoration: none; }
.snav a .ic { width: 18px; height: 18px; flex: none; }
.snav a .lbl { flex: 1; }
.snav a:hover { background: var(--bg); color: var(--fg); text-decoration: none; }
.snav a.on { background: rgba(88, 166, 255, .14); color: var(--text); }
.snav .cnt { font-size: 11.5px; color: var(--muted); background: var(--bg); border-radius: 20px; padding: 1px 7px; }
.snav a.on .cnt { background: rgba(88, 166, 255, .18); color: var(--text); }
.sep { height: 1px; background: var(--line); margin: 11px 4px; }
.add { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 10px;
  border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-weight: 600;
  cursor: pointer; background: none; font: inherit; }
.add:hover { border-color: var(--text); color: var(--text); background: rgba(88, 166, 255, .08); }
.ver { color: var(--muted); font-size: 11px; padding: 10px 8px 0; }

.content { padding: 24px 30px 44px; max-width: 1120px; min-width: 0; }
.content > .view { max-width: 1040px; }

/* ── шапка головної ── */
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.h1 { font-size: 25px; font-weight: 700; letter-spacing: -.3px; }
.h1-sub { color: var(--muted); margin-top: 3px; }
.run { display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: #06131f;
  border: none; padding: 10px 16px; border-radius: 10px; font: 600 14px/1 inherit; cursor: pointer; }
.run:hover { filter: brightness(1.08); }

/* ── вхід акаунтом (веб-пульт, десктоп прибрано) ── */
.run.wide { width: 100%; justify-content: center; }
.vhid { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 100; padding: 22px; }
.vhid-box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; width: 100%; max-width: 380px; }
.vhid-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.vhid-brand .logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--text), #7aa2ff); }
.vhid-p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.vhid-box label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.vhid-box input { width: 100%; margin-top: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); font: inherit; padding: 11px 13px; }
.vhid-box input:focus { outline: none; border-color: var(--text); }
.vhid-err { color: #f0776c; font-size: 13px; min-height: 18px; }
.side-x { display: block; color: var(--muted); font-size: 12.5px; padding: 7px 10px; text-decoration: none; cursor: pointer; }
.side-x:hover { color: var(--fg); }
.side-danger { color: #c9515a; } .side-danger:hover { color: #e05561; }

/* ── відкрите інфо-вікно ── */
.side-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; padding: 0 10px; margin: 6px 0 0; }
.sech-note { color: var(--muted); font-size: 13px; margin: -8px 0 14px; }
#kpi.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.kcard .kn { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.kcard .kl { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.needs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 30px; }
.need { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.need-t { font-size: 14.5px; line-height: 1.4; }
.need-m { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.need-tag { background: rgba(88,166,255,.12); color: var(--text); border-radius: 5px; padding: 1px 7px; margin-right: 6px; }
.tcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tc-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tc-ic { font-size: 17px; }
.tc-n { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.tc-n b { color: var(--audio); }

.why { display: flex; gap: 12px; align-items: flex-start; background: var(--panel);
  border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; margin: 18px 0 22px; }
.why .ic { color: var(--text); flex: none; margin-top: 1px; }
.why p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 82ch; }
.why b { color: var(--fg); }

/* ── смужка статистики ── */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.hkpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.hkpi .n { font-size: 23px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.hkpi .l { color: var(--muted); font-size: 12.5px; margin-top: 1px; }

.sech { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.sech .line { flex: 1; height: 1px; background: var(--line); }

/* ── картки топіків ── */
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tcard { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 16px 17px;
  display: flex; flex-direction: column; gap: 11px; cursor: pointer; transition: border-color .12s, transform .12s; }
.tcard:hover { border-color: var(--text); transform: translateY(-1px); }
.tcard .hd { display: flex; align-items: flex-start; gap: 11px; }
.tico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  color: var(--text); background: rgba(88, 166, 255, .12); }
.tcard h3 { margin: 0; font-size: 15.5px; flex: 1; min-width: 0; font-weight: 650; padding-top: 5px; }
.tpill { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.tpill.grow { background: rgba(63, 185, 80, .14); color: var(--audio); }
.tpill.wait { background: rgba(210, 153, 34, .16); color: var(--warn); }
.tdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tdesc { color: var(--muted); font-size: 13px; margin: 0; }
.tmx { display: flex; gap: 15px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 1px; padding-top: 11px; }
.tmx div { display: flex; flex-direction: column; }
.tmx .v { font-size: 16px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tmx .k { font-size: 11px; color: var(--muted); }
.tmx .v.hot { color: var(--audio); }

/* ── синтез на головній ── */
.synthbox { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 17px; margin-top: 16px; }
.synthbox .row { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.synthbox h3 { margin: 0; font-size: 15px; }
.synthbox .note { color: var(--muted); font-size: 12.5px; margin: 3px 0 0; max-width: 74ch; }
.slist { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sit { display: flex; align-items: center; gap: 11px; font-size: 13px; padding: 8px 11px; border-radius: 9px; background: var(--bg); }
.sit .nm { flex: 1; font-weight: 500; }
.sit .st { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sbar { width: 92px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; flex: none; }
.sbar i { display: block; height: 100%; background: var(--audio); }
.sit.await .sbar i { background: var(--warn); }

/* ── намерзлі топіки ── */
.parked { display: flex; gap: 9px; flex-wrap: wrap; }
.chip { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 6px 12px 6px 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.chip:hover { border-color: var(--text); color: var(--fg); }
.chip .fz { width: 7px; height: 7px; border-radius: 50%; background: var(--off); flex: none; }
.chip b { color: var(--fg); font-weight: 600; }
.chip small { font-size: 11px; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .brand { padding: 6px 8px; }
  .snav { flex-direction: row; flex-wrap: wrap; margin: 0; }
  .add { margin: 0; }
  .sep, .ver { display: none; }
  .content { padding: 18px; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .tgrid { grid-template-columns: 1fr; }
}

/* перемикач активності топіка на картці */
.tsw { margin-left: auto; align-self: center; width: 34px; height: 20px; border-radius: 20px; border: none;
  background: var(--audio); cursor: pointer; padding: 2px; flex: none; }
.tsw span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translateX(14px); transition: transform .15s; }
.tsw:hover { filter: brightness(1.08); }
.tsw:not(.on) { background: var(--off); }
.tsw:not(.on) span { transform: translateX(0); }
/* «увімкнути» на намерзлому чипі — проступає на наведення */
.chip-add { color: var(--text); font-size: 11px; font-weight: 600; opacity: 0; margin-left: 2px; transition: opacity .12s; }
.chip:hover .chip-add { opacity: 1; }

/* маркер топіка, доданого майстром (ще не в дереві) */
.tadd { font-size: 10.5px; font-weight: 600; color: var(--warn); background: rgba(210, 153, 34, .14);
  padding: 1px 7px; border-radius: 20px; vertical-align: middle; margin-left: 4px; white-space: nowrap; }

/* ── майстер додавання топіка ── */
.wiz-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; z-index: 50; padding: 20px; }
.wiz { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 520px;
  padding: 22px 24px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.wiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wiz-dots { display: flex; gap: 6px; }
.wd { width: 22px; height: 4px; border-radius: 4px; background: var(--line); }
.wd.done { background: var(--text-dim); }
.wd.on { background: var(--text); }
.wiz-x { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 4px; }
.wiz-x:hover { color: var(--fg); }
.wiz h3 { margin: 0 0 6px; font-size: 18px; border: none; padding: 0; }
.wiz-h { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.wiz-in { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  color: var(--fg); font: inherit; padding: 11px 13px; }
.wiz-in:focus { outline: none; border-color: var(--text); }
.wiz-ta { resize: vertical; line-height: 1.5; }
.wiz-ex { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.wiz-prev { margin-top: 14px; background: rgba(210, 153, 34, .1); border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0; padding: 9px 12px; font-size: 12.5px; color: var(--muted); }
.wiz-prev b { color: var(--fg); }
.wiz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; gap: 10px; }
.wiz-b { background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 10px;
  padding: 9px 16px; font: 600 14px/1 inherit; cursor: pointer; }
.wiz-b:hover { border-color: var(--muted); }

/* посилання «завантажити кабінет» під брендом у боковому меню */
.dl-side { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 9px 10px; border-radius: 9px;
  background: rgba(88, 166, 255, .12); color: var(--text); font-weight: 600; font-size: 13px; text-decoration: none; }
.dl-side:hover { background: rgba(88, 166, 255, .2); text-decoration: none; }
.dl-side svg { flex: none; }
.dl-side .dl-t { flex: 1; }
.dl-side .dl-s { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ── призма Маслоу ── */
.masl { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; margin-bottom: 24px; }
.masl-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 14px; }
.masl-h span { font-weight: 400; text-transform: none; letter-spacing: 0; }
.masl-rows { display: flex; flex-direction: column; gap: 9px; }
.masl-row { display: grid; grid-template-columns: 150px 90px 22px 1fr; align-items: center; gap: 12px; font-size: 13px; }
.masl-lvl b { display: block; font-weight: 600; } .masl-lvl small { color: var(--muted); font-size: 11px; }
.masl-bar { height: 8px; border-radius: 6px; background: #11161d; overflow: hidden; }
.masl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--text), #7aa2ff); }
.masl-n { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.masl-chips { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.masl-row.off { opacity: .42; }
@media (max-width: 860px) { .masl-row { grid-template-columns: 120px 1fr 20px; } .masl-chips { display: none; } }

/* ── форма зв'язку з автором ── */
.propbox { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; margin-bottom: 16px; }
.proprow2 { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.proprow2 input { flex: 1; min-width: 200px; }
.propbox input, .propbox textarea { width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; color: var(--fg); font: inherit; padding: 9px 12px; }
.propbox input:focus, .propbox textarea:focus { outline: none; border-color: var(--text); }
.propbox textarea { resize: vertical; line-height: 1.5; }
.proprow { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.propok { color: var(--audio); font-size: 13px; }

/* ── проступ форми: доведений біль видно, шум названо чесно ── */
.hkpi.hot .n { color: var(--audio); }
.provenbar { border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; border: 1px solid var(--line); }
.provenbar b { font-weight: 700; }
.provenbar.found { background: rgba(63, 185, 80, .1); border-color: rgba(63, 185, 80, .3); color: var(--fg); }
.provenbar.found b { color: var(--audio); }
.provenbar.warm { background: rgba(88, 166, 255, .08); border-color: rgba(88, 166, 255, .25); color: var(--muted); }
.provenbar.warm b { color: var(--text); }
.provenbar.quiet { background: var(--panel); color: var(--muted); }