/* PulseFlow — адмінка. Без фреймворків, один файл.
 *
 * Правило палітри: колір несе рівно одне значення.
 *   синій    — те, з чим взаємодіють (посилання, активний пункт, акцент)
 *   зелений  — добре / працює
 *   бурштин  — потребує уваги
 *   червоний — погано / зламано
 *   сірий    — усе інше
 * Розмір і кількість (тір блогера) кольором НЕ позначаються — інакше око
 * перестає відрізняти попередження від нейтральної мітки.
 *
 * Окремий набір --cat-* позначає ТЕМУ, а не стан: поля портрета блогера,
 * заголовки розділів. Він потрібен там, де десяток однакових блоків тексту
 * інакше зливається в суцільну стіну й сторінку неможливо переглянути оком.
 * Ці кольори нічого не сигналізують — вони лише розділяють. Тому не змішуємо
 * їх зі статусними: якщо блок щось означає (добре / погано), беремо --ok
 * чи --bad, а не тематичний.
 */

:root {
  --bg:#f5f6f8; --panel:#fff; --panel-2:#fafbfc;
  --line:#e3e6ea; --line-2:#cfd4db;
  --ink:#121723; --ink-2:#454f5e; --mute:#6b7684;

  --accent:#2563eb; --accent-soft:#eaf1fe; --accent-ink:#1a4fbf;
  --ok:#0a7d45;     --ok-soft:#e8f7ee;
  --warn:#a35a05;   --warn-soft:#fdf3e2;
  --bad:#b3271e;    --bad-soft:#fdeceb;
  --hot:#b4460b;    --hot-soft:#fdf0e6;

  --band:#eef3fb; --band-ink:#1c3f7d; --band-line:#d3e0f5;
  --solid:#2563eb; --solid-ink:#fff; --solid-edge:#1a4fbf;
  --band-2:#f2f4f7; --band-2-ink:#4a5563;

  /* Тематичні (не статусні) — світла тема */
  --cat-work:#3b5bdb; --cat-psy:#7048e8;  --cat-int:#0c8599;
  --cat-tone:#c2591b; --cat-aud:#1971c2;  --cat-fmt:#a61e69;
  --cat-life:#2b8a3e; --cat-sum:#495057;

  --radius:9px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e1116; --panel:#161a20; --panel-2:#1b2027;
    --line:#252b34; --line-2:#333b46;
    --ink:#e7eaef; --ink-2:#b3bac6; --mute:#8a94a2;
    --accent:#6d9eff; --accent-soft:#16233b; --accent-ink:#a7c4ff;
    --ok:#4ec97f;   --ok-soft:#10251a;
    --warn:#e0a83c; --warn-soft:#2a2009;
    --bad:#f0736b;  --bad-soft:#2c1513;
    --hot:#f08a4b;  --hot-soft:#2d1a0d;
    --band:#17243a; --band-ink:#9fc0f5; --band-line:#25364f;
    --solid:#2b5bd7; --solid-ink:#fff; --solid-edge:#7ba6ff;
    --band-2:#1b2028; --band-2-ink:#9aa4b2;
    
    /* Тематичні — темна тема: світліші, щоб читались на темному */
    --cat-work:#8aa4ff; --cat-psy:#b197fc; --cat-int:#4dd4e8;
    --cat-tone:#f0a06a; --cat-aud:#74b6ff; --cat-fmt:#f183be;
    --cat-life:#69db7c; --cat-sum:#a8b1bd;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg:#0e1116; --panel:#161a20; --panel-2:#1b2027;
  --line:#252b34; --line-2:#333b46;
  --ink:#e7eaef; --ink-2:#b3bac6; --mute:#8a94a2;
  --accent:#6d9eff; --accent-soft:#16233b; --accent-ink:#a7c4ff;
  --ok:#4ec97f;   --ok-soft:#10251a;
  --warn:#e0a83c; --warn-soft:#2a2009;
  --bad:#f0736b;  --bad-soft:#2c1513;
  --hot:#f08a4b;  --hot-soft:#2d1a0d;
  --band:#17243a; --band-ink:#9fc0f5; --band-line:#25364f;
  --solid:#2b5bd7; --solid-ink:#fff; --solid-edge:#7ba6ff;
  --band-2:#1b2028; --band-2-ink:#9aa4b2;
  
    /* Тематичні — темна тема: світліші, щоб читались на темному */
    --cat-work:#8aa4ff; --cat-psy:#b197fc; --cat-int:#4dd4e8;
    --cat-tone:#f0a06a; --cat-aud:#74b6ff; --cat-fmt:#f183be;
    --cat-life:#69db7c; --cat-sum:#a8b1bd;
    --shadow:0 1px 2px rgba(0,0,0,.3);
}
:root[data-theme="light"] {
  --bg:#f5f6f8; --panel:#fff; --panel-2:#fafbfc;
  --line:#e3e6ea; --line-2:#cfd4db;
  --ink:#121723; --ink-2:#454f5e; --mute:#6b7684;
  --accent:#2563eb; --accent-soft:#eaf1fe; --accent-ink:#1a4fbf;
  --ok:#0a7d45;   --ok-soft:#e8f7ee;
  --warn:#a35a05; --warn-soft:#fdf3e2;
  --bad:#b3271e;  --bad-soft:#fdeceb;
  --hot:#b4460b;  --hot-soft:#fdf0e6;
  --band:#eef3fb; --band-ink:#1c3f7d; --band-line:#d3e0f5;
  --solid:#2563eb; --solid-ink:#fff; --solid-edge:#1a4fbf;
  --band-2:#f2f4f7; --band-2-ink:#4a5563;
  --shadow:0 1px 2px rgba(16,24,40,.05);
}

* { box-sizing:border-box; }

/* Атрибут hidden мусить перемагати будь-який display у цьому файлі.
   Без цього рядка .renameform { display:flex } робив приховану форму видимою:
   авторське правило сильніше за браузерне приховування. */
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:21px; margin:0 0 18px; font-weight:640; letter-spacing:-.01em; }
h2 { font-size:14px; margin:0 0 12px; font-weight:640; }
h3 { font-size:15.5px; margin:6px 0; font-weight:620; }
code, .mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; }
code { background:var(--panel-2); padding:1px 5px; border-radius:4px; border:1px solid var(--line); }
.muted { color:var(--mute); }
.small { font-size:12px; }
.nowrap { white-space:nowrap; }
.hidden { display:none; }
.urgent { color:var(--hot); font-weight:600; }
.accent { color:var(--accent); }
.bad-text { color:var(--bad); }
.warnmark { color:var(--warn); font-weight:600; }

/* --- Бічне меню --- */
body.app { display:flex; min-height:100vh; align-items:flex-start; }

.side { width:216px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:20; }
.side-top { display:flex; align-items:center; justify-content:space-between; padding:19px 18px 15px; }
.brand { display:flex; align-items:center; gap:7px;
  font-weight:700; font-size:17.5px; color:var(--ink); letter-spacing:-.02em; }
/* Значок трохи менший за рядок тексту — інакше він перетягує увагу на себе */
.brand-mark { width:17px; height:17px; flex-shrink:0; display:block; }
.brand .fl { color:var(--accent); }
.burger { display:none; cursor:pointer; font-size:19px; color:var(--mute); padding:2px 6px; border-radius:6px; }
.burger:hover { background:var(--panel-2); }

.side-nav { display:flex; flex-direction:column; gap:1px; padding:2px 10px; overflow-y:auto; }
.side-nav a { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:7px;
  color:var(--ink-2); font-weight:500; font-size:13.5px; position:relative; }
.side-nav a:hover { background:var(--panel-2); color:var(--ink); text-decoration:none; }
.side-nav a.on { background:var(--solid); color:var(--solid-ink); font-weight:620; }
.side-nav a.on::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background:var(--solid-edge); }
.side-nav .ico { width:16px; text-align:center; font-size:13px; flex-shrink:0; opacity:.75;
  filter:grayscale(1); }
.side-nav a.on .ico { opacity:1; filter:none; }

.side-foot { margin-top:auto; padding:14px 16px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:10px; }
.who { min-width:0; flex:1; }
.who-name { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.who-role { font-size:11px; color:var(--mute); }
.out { font-size:11.5px; color:var(--mute); flex-shrink:0; }

.content { flex:1; min-width:0; padding:26px 30px 64px; max-width:1500px; }
.center { max-width:400px; margin:9vh auto; padding:20px; }
body.bare { background:var(--bg); display:block; }

@media (max-width:860px) {
  body.app { display:block; }
  .side { width:auto; height:auto; position:static; border-right:none; border-bottom:1px solid var(--line); }
  .burger { display:block; }
  .side-nav { display:none; flex-direction:row; flex-wrap:wrap; padding:0 10px 10px; }
  .side-foot, .side-search { display:none; }
  #navtoggle:checked ~ .side .side-nav { display:flex; }
  #navtoggle:checked ~ .side .side-foot { display:flex; }
  .content { padding:18px 16px 50px; }
}

/* --- Картки --- */
/* Відступ згори прибрано: заголовок має власне тло й притискається до краю. */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:0 18px 17px; margin-bottom:16px; box-shadow:var(--shadow); overflow:hidden; }
.card.narrow { max-width:400px; }

/* Заголовок картки — окрема смуга з тлом. Тонкої лінії було замало:
   на сторінці з десятком карток вони зливались в один сірий стовпчик. */
.card > h2 { display:flex; align-items:center; gap:9px;
  margin:0 -18px 15px; padding:10px 18px;
  background:var(--band); color:var(--band-ink);
  border-bottom:1px solid var(--band-line);
  font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; font-weight:700; }
.card > h2::before { content:''; width:3px; height:13px; border-radius:2px;
  background:currentColor; flex-shrink:0; opacity:.65; }
.card > h2 .muted { color:inherit; opacity:.7; text-transform:none; font-weight:600; }

.card.warnbox > h2 { background:var(--warn-soft); color:var(--warn); border-bottom-color:var(--warn); }
.card.warnbox { border-color:var(--warn); background:var(--warn-soft); }
.card.warnbox h2 { color:var(--warn); }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px) { .cols { grid-template-columns:1fr; } }

/* --- Плитки: число головне, підпис другорядний --- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; margin-bottom:18px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; display:block; color:var(--ink); box-shadow:var(--shadow); }
.tile:hover { text-decoration:none; border-color:var(--line-2); }
a.tile:hover { border-color:var(--accent); }
.tile b { display:block; font-size:27px; font-weight:650; line-height:1.05; letter-spacing:-.02em; }
.tile span { display:block; font-size:12px; color:var(--mute); margin-top:5px; }
.tile em { display:block; font-size:12px; color:var(--hot); font-style:normal; font-weight:600; margin-top:5px; }
.tile.hot { border-color:var(--hot); background:var(--hot-soft); }
.tile.hot b { color:var(--hot); }

/* --- Таблиці --- */
table.t { width:100%; border-collapse:collapse; font-size:13px; }
table.t.wide { display:block; overflow-x:auto; white-space:nowrap; }
table.t th { text-align:left; padding:7px 10px; color:var(--mute); font-weight:600;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--line); background:var(--panel-2); }
table.t td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2); }
table.t td strong { color:var(--ink); font-weight:600; }
table.t tbody tr:hover td { background:var(--panel-2); }
table.t tr:last-child td { border-bottom:none; }
table.t tr.dim td { opacity:.5; }
.meta { font-size:11.5px; color:var(--mute); margin-top:3px; white-space:normal; }
.acts { white-space:nowrap; }

/* --- Списки --- */
ul.list { list-style:none; margin:0; padding:0; }
ul.list li { padding:10px 0; border-bottom:1px solid var(--line); }
ul.list li:last-child { border-bottom:none; }
ul.list.tight li { padding:7px 0; }

/* --- Форми --- */
label { display:block; margin-bottom:13px; font-size:12px; color:var(--mute); font-weight:500; }
input, select, textarea { width:100%; padding:8px 11px; margin-top:5px; font:inherit;
  color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:7px; }
input::placeholder, textarea::placeholder { color:var(--mute); opacity:.7; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
textarea { resize:vertical; min-height:72px; line-height:1.5; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 14px; align-items:end; }
.grid .wide { grid-column:1/-1; }
.grid button { margin-bottom:13px; }
.filters { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.filters select, .filters input { width:auto; min-width:150px; margin-top:0; }
form.inline { display:flex; gap:4px; align-items:center; margin:0; }
form.inline input, form.inline select { margin-top:0; }
.xs { padding:3px 7px !important; font-size:11px !important; width:auto !important; }
.num { width:80px !important; }

.btn { display:inline-block; padding:8px 14px; font:inherit; font-size:13px; font-weight:550;
  cursor:pointer; color:var(--ink-2); background:var(--panel); border:1px solid var(--line-2);
  border-radius:7px; width:auto; }
.btn:hover { background:var(--panel-2); color:var(--ink); border-color:var(--mute); text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.08); background:var(--accent); color:#fff; }
.btn.danger { color:var(--bad); border-color:var(--line-2); }
.btn.danger:hover { background:var(--bad-soft); border-color:var(--bad); }

details.addbox summary { cursor:pointer; font-weight:620; font-size:13.5px; color:var(--ink-2); }
details.addbox summary:hover { color:var(--accent); }
details.addbox[open] summary { margin-bottom:15px; color:var(--ink); }

/* --- Мітки. Заливка замість обведення: читається як мітка, а не як помилка. --- */
.pill { display:inline-block; padding:2px 8px; font-size:11px; font-weight:600; border-radius:5px;
  background:var(--panel-2); color:var(--mute); border:1px solid var(--line); vertical-align:middle;
  white-space:nowrap; }
.pill.ok   { background:var(--ok-soft);     color:var(--ok);         border-color:transparent; }
.pill.warn { background:var(--warn-soft);   color:var(--warn);       border-color:transparent; }
.pill.bad  { background:var(--bad-soft);    color:var(--bad);        border-color:transparent; }
.pill.hot  { background:var(--hot);         color:#fff;              border-color:transparent; }
.pill.cool { background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; }

/* Тір — це РОЗМІР, а не «добре/погано», тому кольором не позначається.
   Замість цього крапки: чотири заповнені = mega, одна = micro. */
.t-mega, .t-macro, .t-mid, .t-micro, .t-unknown,
.tier-mega, .tier-macro, .tier-mid, .tier-micro, .tier-unknown {
  background:transparent; border-color:transparent; color:var(--ink-2); padding-left:0; }
.t-mega::before    { content:'●●●●'; color:var(--accent); margin-right:7px; letter-spacing:1px; }
.t-macro::before   { content:'●●●○'; color:var(--accent); margin-right:7px; letter-spacing:1px; }
.t-mid::before     { content:'●●○○'; color:var(--accent); margin-right:7px; letter-spacing:1px; }
.t-micro::before   { content:'●○○○'; color:var(--accent); margin-right:7px; letter-spacing:1px; }
.t-unknown::before { content:'○○○○'; color:var(--line-2); margin-right:7px; letter-spacing:1px; }

/* --- Повідомлення --- */
.alert { padding:11px 14px; border-radius:8px; margin-bottom:16px; font-size:13px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2); }
.alert.ok  { border-color:transparent; background:var(--ok-soft);  color:var(--ok); }
.alert.err { border-color:transparent; background:var(--bad-soft); color:var(--bad); }
.alert pre { white-space:pre-wrap; font-size:11px; margin:8px 0 0; }

/* --- Смуги прогресу й бюджетів --- */
.meter { margin-bottom:15px; }
.meter-head { display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; color:var(--ink-2); }
.bar { height:6px; background:var(--band-2); border-radius:99px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--ok); border-radius:99px; transition:width .3s; }
.bar i.warn { background:var(--warn); }
.bar i.over { background:var(--bad); }

/* --- Кандидати --- */
.cand { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line-2);
  border-radius:var(--radius); padding:15px 17px; margin-bottom:12px; box-shadow:var(--shadow); }
.cand.ishot { border-left-color:var(--hot); }
.cand-head { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:7px; }
.cand-head .score { font-size:11px; color:var(--mute); margin-left:auto; }
.cand h3 { margin:2px 0 5px; color:var(--ink); }
.board { margin:11px 0; padding:11px 14px; background:var(--accent-soft); border-radius:7px;
  font-weight:650; font-size:15px; color:var(--accent-ink); }
/* Варіанти напису. Сам напис виділений — це те, що читатиме глядач;
   переклад і пояснення жарту навмисно тихіші, вони службові. */
.boards { margin:11px 0; }
.boards-head { font-size:12px; color:var(--mute); margin-bottom:7px; }
.boardv { padding:9px 13px; margin-bottom:6px; border-radius:7px;
  background:var(--accent-soft); border-left:3px solid var(--accent); }
.boardv-text { font-weight:650; font-size:15px; color:var(--accent-ink); }
.boardv-text .tone { margin-left:7px; font-weight:400; font-size:11px;
  color:var(--mute); text-transform:lowercase; }
.boardv-tr { margin-top:3px; font-size:13px; color:var(--ink-2); }
.boardv-why { margin-top:4px; font-size:12px; color:var(--mute); }

.idea { margin:9px 0; font-size:13px; color:var(--ink-2); }
.assets { margin:9px 0; display:flex; gap:5px; flex-wrap:wrap; font-size:12px; color:var(--mute); align-items:center; }
.row-acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.cand-acts { display:flex; gap:8px; margin-top:13px; flex-wrap:wrap; align-items:center; }
.cand-acts input, .cand-acts select { width:auto; margin-top:0; }
.cand-acts input[name=reason_text] { flex:1; min-width:140px; }
.chk { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-2); cursor:pointer; }
.chk input { width:auto; margin:0; }

/* --- Шкала ризику. Тут колір доречний: це справді «добре/погано». --- */
.pill.risk { font-weight:650; }
.r-unknown { background:var(--panel-2); color:var(--mute); border-color:var(--line); }
.r-low, .r-ok { background:var(--ok-soft);   color:var(--ok);   border-color:transparent; }
.r-mid       { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.r-high      { background:var(--hot-soft);  color:var(--hot);  border-color:transparent; }
.r-max       { background:var(--bad);       color:#fff;        border-color:transparent; }
.riskbox { margin:11px 0; padding:10px 13px; border-radius:7px; font-size:12.5px;
  background:var(--warn-soft); color:var(--ink-2); }
.riskbox strong { color:var(--warn); }

/* Поради ШІ. Навмисно нейтральні сірим: це не сигнал і не оцінка,
   а супровідний текст до рішення, яке ухвалює людина. */
.advice { margin:11px 0 0; font-size:12.5px; color:var(--ink-2); }
.advice > summary { cursor:pointer; color:var(--ink-2); user-select:none; }
.advice > summary:hover { color:var(--ink); }
.advice p { margin:8px 0 0; padding-left:14px; border-left:2px solid var(--line); }
.advice strong { color:var(--ink); }

/* --- Картка блогера --- */
.crumbs { margin:0 0 14px; font-size:12.5px; }
.acc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  flex-wrap:wrap; margin-bottom:18px; }
.acc-head h1 { margin:0 0 5px; }
.acc-head .ext { font-size:14px; }
.acc-badges { display:flex; gap:6px; flex-wrap:wrap; }

/* --- Поля портрета блогера ---
   Кожне поле має власний колір і піктограму. Це не оздоба: висновків десять,
   вони довгі, і без розділення сторінка читається як суцільна стіна тексту.
   Наочно показуємо один рядок, повний текст — під «показати більше». */
.pfields { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }

.pf { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); }
.pf-head { display:flex; align-items:center; gap:7px;
  padding:5px 11px; background:var(--cat, var(--mute)); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.pf-ico { font-size:12px; filter:grayscale(1) brightness(3); }
.pf-body { padding:9px 11px; }
.pf-short { font-size:13.5px; color:var(--ink); }

.pf-more { margin-top:5px; }
.pf-more > summary { font-size:11.5px; color:var(--accent); cursor:pointer;
  list-style:none; user-select:none; display:inline-block; }
.pf-more > summary::-webkit-details-marker { display:none; }
.pf-more > summary::after { content:' ▾'; }
.pf-more[open] > summary::after { content:' ▴'; }
.pf-more > summary:hover { text-decoration:underline; }
.pf-full { margin-top:7px; padding-top:7px; border-top:1px dashed var(--line-2);
  font-size:13px; color:var(--ink-2); }

.pf-work  { --cat:var(--cat-work); }
.pf-psy   { --cat:var(--cat-psy); }
.pf-int   { --cat:var(--cat-int); }
.pf-tone  { --cat:var(--cat-tone); }
.pf-aud   { --cat:var(--cat-aud); }
.pf-fmt   { --cat:var(--cat-fmt); }
.pf-life  { --cat:var(--cat-life); }
.pf-sum   { --cat:var(--cat-sum); }
/* Ці два не тематичні, а змістовні — тому статусні кольори, як усюди */
.pf-hook  { --cat:var(--ok); }
.pf-hook  .pf-body { background:var(--ok-soft); }
.pf-avoid { --cat:var(--bad); }
.pf-avoid .pf-body { background:var(--bad-soft); }

/* --- Шапка профілю блогера: що зібрано й наскільки повно --- */
.phead { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 18px; box-shadow:var(--shadow); }
.phead-main { display:flex; gap:26px; flex-wrap:wrap; flex:1; min-width:250px; }
.phead-num b { display:block; font-size:20px; font-weight:680; letter-spacing:-.02em; }
.phead-num span { font-size:11.5px; color:var(--mute); }

.phead-side { display:flex; flex-direction:column; gap:9px; min-width:250px; }
.phead-status { padding:7px 11px; border-radius:7px; border-left:3px solid; }
.phead-status b { display:block; font-size:12.5px; }
.phead-status span { font-size:11px; opacity:.85; }
.phead-status.ok   { background:var(--ok-soft);   border-color:var(--ok);   color:var(--ok); }
.phead-status.warn { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.phead-status.bad  { background:var(--bad-soft);  border-color:var(--bad);  color:var(--bad); }

/* Що саме проаналізовано. Крапка кольором показує повноту джерела —
   тут це справді стан, а не тема, тому кольори статусні. */
.phead-src { display:flex; flex-direction:column; gap:2px; font-size:11.5px; }
.src-row { display:flex; align-items:center; gap:7px; }
.src-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--line-2); }
.src-row.full .src-dot { background:var(--ok); }
.src-row.part .src-dot { background:var(--warn); }
.src-name { color:var(--ink-2); }
.src-val { margin-left:auto; color:var(--mute); font-variant-numeric:tabular-nums; }
.src-row.none .src-name, .src-row.none .src-val { color:var(--mute); }

.pf-acts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }

.editbox { border-top:1px solid var(--line); padding-top:12px; }
.editbox > summary { cursor:pointer; font-size:12.5px; color:var(--mute); user-select:none; }
.editbox > summary:hover { color:var(--ink); }

.kv { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.kv:last-child { border-bottom:none; }
.kv b { flex:0 0 150px; color:var(--mute); font-weight:600; font-size:12px; }
.kv span { color:var(--ink-2); }

.obs-add { display:flex; gap:6px; margin-bottom:15px; }
.obs-add input[name=text] { flex:1; margin-top:0; }
.obs-add select { width:auto; margin-top:0; }
/* Спостереження групуються за видом, і кожен вид має той самий колір, що
   й споріднене поле портрета вище. Раніше все це був один сірий список,
   у якому нічого не знаходилось поглядом. */
.obs-group { margin-bottom:12px; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; background:var(--panel); }
.obs-kind { display:flex; align-items:center; gap:7px;
  padding:6px 11px; background:var(--cat, var(--mute)); color:#fff;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  cursor:pointer; user-select:none; list-style:none; }
.obs-kind::-webkit-details-marker { display:none; }
/* Стрілка показує, що заголовок можна натиснути, і в який бік він зараз */
.obs-kind::after { content:'▾'; font-size:9px; opacity:.8; order:3; }
details.obs-group:not([open]) .obs-kind::after { content:'▸'; }
.obs-group .obs-count { order:2; }
.obs-kind-ico { font-size:12px; filter:grayscale(1) brightness(3); }
.obs-count { margin-left:auto; font-weight:600; opacity:.85;
  background:rgba(255,255,255,.22); padding:0 6px; border-radius:9px; }

.obs { padding:8px 11px; border-top:1px solid var(--line); }
.obs:first-of-type { border-top:none; }
.obs-row { display:flex; align-items:flex-start; gap:7px; }
.obs-text { font-size:13px; color:var(--ink); flex:1; min-width:0; }
.obs-foot { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:3px; font-size:11px; color:var(--mute); }
.obs-ev { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.obs-when { margin-left:auto; white-space:nowrap; }
.obs-foot form.inline { display:inline-flex; }

/* --- Джерела: країна > група --- */
details.ctry { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow); }
.ctry-head { display:flex; align-items:center; gap:10px; padding:13px 16px; cursor:pointer;
  font-weight:640; font-size:14.5px; list-style:none; user-select:none;
  background:var(--solid); color:var(--solid-ink); border-left:3px solid var(--solid-edge); }
.ctry-head::-webkit-details-marker { display:none; }
.ctry-head::before { content:'▸'; font-size:10px; transition:transform .15s; opacity:.6; }
details.ctry[open] > .ctry-head::before { transform:rotate(90deg); }
.ctry-head:hover { filter:brightness(1.07); }
details.ctry[open] > .ctry-head { border-bottom:none; }
.ctry-head .pill { background:rgba(255,255,255,.2); color:#fff; border-color:transparent; }
.ctry-head .pill.warn { background:rgba(255,255,255,.28); color:#fff; }
.flag { font-size:16px; line-height:1; }
.ctry-name { flex:1; }
.ctry-stats { display:flex; gap:5px; flex-wrap:wrap; }
.ctry-body { padding:2px 12px 10px; }

details.grp { margin-bottom:2px; }
.grp-head { display:flex; align-items:center; gap:7px; padding:8px 12px; cursor:pointer;
  font-size:12.5px; font-weight:620; list-style:none; user-select:none;
  background:var(--band-2); color:var(--band-2-ink); border-radius:6px; margin:8px 0 0; }
.grp-head::-webkit-details-marker { display:none; }
.grp-head::before { content:'▸'; font-size:9px; transition:transform .15s; opacity:.6; }
details.grp[open] > .grp-head::before { transform:rotate(90deg); }
.grp-head:hover { color:var(--ink); }
.gicon { font-size:14px; }
details.grp table.t { margin-bottom:8px; }
details.grp table.t th { background:transparent; }

/* --- Країни --- */
.taboo { max-width:280px; white-space:normal; }
tr.editing td { background:var(--panel-2); }
tr.editing .grid { padding:6px 0; }

/* --- Налаштування --- */
.setlist { display:flex; flex-direction:column; }
.setrow { display:grid; grid-template-columns:1fr 260px; gap:22px; align-items:start;
  padding:13px 0; border-bottom:1px solid var(--line); }
.setrow:last-child { border-bottom:none; }
.setlabel label { margin:0; font-size:13.5px; color:var(--ink); font-weight:600; }
.setkey { font-size:10.5px; color:var(--mute); opacity:.65; margin-top:4px; }
.setinput input, .setinput textarea, .setinput select { margin-top:0; }
.switch { display:flex; align-items:center; gap:9px; margin:0; cursor:pointer; font-size:13px; color:var(--ink-2); }
.switch input { width:auto; margin:0; accent-color:var(--accent); }
.savebar { position:sticky; bottom:0; padding:14px 0; background:linear-gradient(transparent, var(--bg) 45%); }
@media (max-width:760px) { .setrow { grid-template-columns:1fr; gap:6px; } }

/* --- Тема --- */
.themebtn { background:none; border:1px solid var(--line-2); border-radius:6px; cursor:pointer;
  font-size:12px; line-height:1; padding:5px 7px; color:var(--ink-2); width:auto; }
.themebtn:hover { border-color:var(--accent); }

/* --- Воронка --- */
.funnel-step { margin-bottom:17px; }
.funnel-head { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.funnel-label { font-weight:620; font-size:13.5px; }
.funnel-n { font-size:18px; font-weight:680; letter-spacing:-.02em; }
.funnel-conv { font-size:11.5px; color:var(--mute); margin-left:auto; }
.funnel-step .bar { height:9px; }
.funnel-step .bar i { background:var(--accent); }

/* --- Швидкий пошук --- */
.searchwrap { position:fixed; inset:0; background:rgba(9,12,18,.5); z-index:100;
  display:none; align-items:flex-start; justify-content:center; padding-top:12vh; }
.searchwrap.on { display:flex; }
.searchbox { width:min(620px,92vw); background:var(--panel); border:1px solid var(--line-2);
  border-radius:11px; box-shadow:0 20px 55px rgba(9,12,18,.32); overflow:hidden; }
.searchbox input { border:none; border-radius:0; margin:0; padding:16px 18px; font-size:15.5px;
  background:transparent; }
.searchbox input:focus { outline:none; box-shadow:none; }
.searchres { max-height:56vh; overflow-y:auto; border-top:1px solid var(--line); }
.searchres a { display:flex; align-items:center; gap:11px; padding:10px 18px; color:var(--ink);
  border-bottom:1px solid var(--line); font-size:13.5px; }
.searchres a:last-child { border-bottom:none; }
.searchres a:hover, .searchres a.sel { background:var(--accent-soft); text-decoration:none; }
.searchres .kind { font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--mute); flex-shrink:0; width:74px; }
.searchres .sub { font-size:11.5px; color:var(--mute); margin-left:auto; }
.searchhint { padding:9px 18px; font-size:11.5px; color:var(--mute); border-top:1px solid var(--line);
  background:var(--panel-2); }
.side-search { display:flex; align-items:center; gap:7px; margin:0 10px 10px; padding:7px 12px;
  border:1px solid var(--line-2); border-radius:7px; color:var(--mute); font-size:12.5px;
  cursor:pointer; background:var(--panel-2); width:calc(100% - 20px); }
.side-search:hover { border-color:var(--accent); color:var(--ink); }
.side-search kbd { margin-left:auto; font-size:10px; border:1px solid var(--line-2);
  border-radius:4px; padding:1px 5px; font-family:inherit; color:var(--mute); }

/* --- Джерела: одна сітка на всю країну ---
   Колонки задані явно й однакові для кожної групи, тому стовпці всіх груп
   стоять на одній вертикалі. Прокрутка — на обгортці, а не на самій таблиці:
   display:block на table зламав би розрахунок ширин. */
.srcgrid { overflow-x: visible; }
.src-table { table-layout: fixed; width: 100%; min-width: 0; margin: 0; }
.src-table td, .src-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-table td .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-head { margin-bottom: 0; }
.src-head th { position: sticky; top: 0; z-index: 1; }

.src-table .c-name   { width: 22%; }
.src-table .c-addr   { width: 25%; }
.src-table .c-rhythm { width:  8%; }
.src-table .c-last   { width: 11%; }
.src-table .c-total  { width:  8%; }
.src-table .c-act    { width: 26%; }

/* Рядок групи розтягується на всю ширину сітки, щоб не ламати колонки */
details.grp { margin: 0; }
details.grp > .grp-head { min-width: 0; }

.src-table td .meta { margin-top:2px; line-height:1.3; }
.src-table .acts select.xs { max-width:100%; }

.src-table td, .src-table th { padding-left:7px; padding-right:7px; }
.src-table .acts { display:flex; gap:3px; align-items:center; }
.src-table .acts form.inline { width:100%; gap:3px; }
.src-table .acts select.xs { flex:1; min-width:0; font-size:10.5px !important; padding:3px 4px !important; }
.src-table .acts .btn.xs { flex:0 0 auto; padding:3px 6px !important; }
@media (max-width:1100px) {
  .src-table .c-addr { width:20%; }
  .src-table .c-act  { width:29%; }
}

/* --- Ієрархія списку джерел: країна → група → рядки ---
   Кожен рівень зсувається вправо і має власну напрямну лінію,
   тому вкладеність видно навіть коли розгорнуто все одразу. */
.ctry-body { padding: 4px 12px 10px 0; }
.srcgrid   { margin-left: 16px; padding-left: 14px; border-left: 2px solid var(--band-line); }

details.grp > .grp-head { padding-left: 12px; }
.src-table th:first-child,
.src-table td:first-child { padding-left: 20px; position: relative; }

/* Коротка риска-вусик від напрямної до кожного рядка */
.src-table tbody td:first-child::before {
  content: '';
  position: absolute;
  left: 7px; top: 50%;
  width: 7px; height: 1px;
  background: var(--line-2);
}

/* --- Швидке додавання просто в групі --- */
.src-table tr.addrow td { border-bottom: none; padding-top: 6px; padding-bottom: 10px; }
.src-table tr.addrow:hover td { background: transparent; }
.src-table tr.addrow td::before { display: none; }
form.addhere { display: flex; gap: 6px; align-items: center; width: 100%; }
form.addhere .addplus { color: var(--mute); font-weight: 700; font-size: 15px; flex: 0 0 auto;
  width: 14px; text-align: center; }
form.addhere input { margin-top: 0; font-size: 12px; padding: 5px 9px; }
form.addhere input[name=handle] { flex: 2 1 0; min-width: 0; }
form.addhere .addname { flex: 1 1 0; min-width: 0; }
form.addhere .btn { flex: 0 0 auto; }
form.addhere input:placeholder-shown { border-style: dashed; }

/* --- Перейменування джерела на місці --- */
.srcname { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.srcname strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Олівець тримає своє місце завжди, інакше назва смикалась би при наведенні */
.pencil { flex: 0 0 auto; border: none; background: none; cursor: pointer; padding: 0 2px;
  font-size: 12px; line-height: 1; color: var(--mute); opacity: 0; transition: opacity .12s; }
.src-table tr:hover .pencil,
.pencil:focus-visible { opacity: 1; }
.pencil:hover { color: var(--accent); }

.renameform { display: flex; gap: 4px; align-items: center; width: 100%; }
.renameform input[name=name] { margin-top: 0; flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; padding: 4px 8px; }
.renameform .btn { flex: 0 0 auto; }

/* На дотикових екранах наведення немає — олівець показуємо завжди */
@media (hover: none) { .pencil { opacity: .6; } }