/* ============================================================
   CRM — рабочее место по жизненному циклу игрока (вкладки хаба, воронка, RFM,
   очередь удержания) и карточка 360°.

   Перенесено из прототипа почти как есть: стили обкатаны в UI, а палитра,
   радиусы и тени берутся из общего /shared/styles/tokens.css — своей копии
   токенов здесь нет (в прототипе она была у каждого приложения своя).
   ============================================================ */

/* tabs + wrapping segment chips with counts */
.crm-tabs{margin-bottom:16px}
.crm-tabs button i{font-size:15px;margin-right:2px}
/* Четвёртая вкладка («Рассылки») в строку телефона уже не влезает, и перенос
   ломает пилюлю на две строки. Уходят ГЛИФЫ, а не подписи: у каждой вкладки
   свой вопрос («кому написать сейчас», «найти любого», «работает ли без меня»,
   «кому мы писали»), и угадывать его по иконке хост не должен. */
@media (max-width:440px){
  .crm-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;width:100%}
  .crm-tabs button{padding:8px 4px;font-size:11px}
  .crm-tabs button i{display:none}
}
.seg.seg-wrap{display:flex}
.seg.seg-wrap button{display:inline-flex;align-items:center;gap:6px}
.seg.seg-wrap button i{font-size:14px}
.seg.seg-wrap button b{font-family:var(--num);opacity:.7;font-weight:700}
.seg.seg-wrap button.on b{opacity:.9}

/* shared lifecycle badge + rfm chip -------------------------------------- */
.lc-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;white-space:nowrap;
  color:var(--lc,var(--teal));background:color-mix(in srgb,var(--lc,var(--teal)) 16%,transparent);border:1px solid color-mix(in srgb,var(--lc,var(--teal)) 34%,transparent)}
.lc-badge i{font-size:13px}
.rfm-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;white-space:nowrap;
  color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--lg-brd)}
.rfm-chip i{font-size:13px}

/* two-column CRM layout (stacks on narrow) */
.crm-2col{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.crm-2col{grid-template-columns:1fr 1fr}}

/* ---------------- lifecycle funnel ---------------- */
.funnel{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.funnel::-webkit-scrollbar{display:none}
.fn-tile{flex:1;min-width:120px;text-align:left;border:1px solid color-mix(in srgb,var(--lc) 30%,transparent);border-radius:16px;padding:13px 14px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--lc) 12%,transparent),var(--lg));cursor:pointer;transition:.16s;box-shadow:var(--spec)}
.fn-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--lc) 55%,transparent)}
.fn-top{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--lc)}
.fn-top i{font-size:15px}
.fn-n{font-family:var(--num);font-weight:700;font-size:30px;line-height:1;margin:8px 0 8px}
.fn-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.fn-bar>i{display:block;height:100%;border-radius:999px;background:var(--lc);min-width:3px}
.fn-arrow{display:flex;align-items:center;color:var(--dim);flex:none}
.fn-arrow i{font-size:18px}
@media (max-width:720px){.fn-arrow{display:none}.fn-tile{min-width:132px}}

.risk-track{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.risk-track .rt-l{font-size:12px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.rt-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:11px;cursor:pointer;transition:.15s;
  color:var(--lc);background:color-mix(in srgb,var(--lc) 12%,transparent);border:1px solid color-mix(in srgb,var(--lc) 30%,transparent)}
.rt-chip:hover{background:color-mix(in srgb,var(--lc) 22%,transparent)}
.rt-chip b{font-family:var(--num)}

/* ---------------- lead / value rows ---------------- */
.lead-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.lead-row:last-child{border-bottom:0}
.lead-row.clickable{cursor:pointer;border-radius:12px;transition:.12s}
.lead-row.clickable:hover{background:rgba(255,255,255,.04)}
.lead-row .av{width:38px;height:38px;border-radius:11px;font-size:14px}
.lead-row .rank{width:22px;text-align:center;font-family:var(--num);font-weight:700;color:var(--dim);flex:none}
.lead-row .lr-i{flex:1;min-width:0}
.lead-row .lr-i b{font-size:13.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-row .lr-i small{font-size:11.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px}
.lead-row .lr-v{font-family:var(--num);font-weight:700;font-size:15px;flex:none}
.lead-row .lr-acts{display:flex;gap:6px;flex:none}
.lead-row .lr-acts .btn.sm{padding:7px 9px}

/* ---------------- RFM segment grid ---------------- */
.rfm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.rfm-card{border-radius:16px;padding:14px;background:var(--lg);border:1px solid var(--lg-brd);box-shadow:var(--spec);cursor:pointer;transition:.15s}
.rfm-card:hover{transform:translateY(-2px);border-color:rgba(45,226,197,.4)}
.rfm-card .rc-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800}
.rfm-card .rc-h i{font-size:16px;color:var(--teal)}
.rfm-card .rc-n{font-family:var(--num);font-weight:700;font-size:26px;line-height:1;margin:6px 0 4px}
.rfm-card .rc-b{font-size:11px;line-height:1.35}

/* ---------------- campaign composer ---------------- */
.camp-reach{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);padding:0 0 2px}
.camp-reach i{color:var(--teal)}
.camp-reach b{font-family:var(--num);color:var(--text);font-size:16px}

/* ---------------- roster tools + table ---------------- */
.roster-tools{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.sort-sel{width:auto;flex:none;min-width:150px}
.crm-tbl .dt-row{grid-template-columns:minmax(150px,2.2fr) 128px .8fr .7fr .9fr 1fr}
.mtag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:2px 7px;border-radius:7px;background:rgba(124,92,255,.16);color:#cfc6ff;margin-left:4px;vertical-align:middle}
@media (max-width:720px){
  .crm-tbl .dt-row{grid-template-columns:1fr auto}
  /* Шапка таблицы на узком экране разъезжается в три строки подписей к
     колонкам, которых там уже нет: строка превращается в карточку, и каждое
     значение читается само по себе. */
  .crm-tbl .dt-row.hd{display:none}
  .roster-tools{flex-wrap:wrap}.sort-sel{flex:1}
}

/* ---------------- retention queue ---------------- */
.ret-list{display:flex;flex-direction:column;gap:10px}
.ret-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;background:var(--lg);border:1px solid var(--lg-brd);box-shadow:var(--spec)}
.ret-row .rr-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}
.ret-row .av{width:44px;height:44px;border-radius:13px;font-size:16px}
.ret-row .rr-i{flex:1;min-width:0}
.ret-row .rr-i>b{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ret-row .rr-i small{font-size:11.5px;color:var(--muted);display:block;margin:3px 0 4px}
.ret-row .rr-na{font-size:12px;color:var(--teal);font-weight:600;display:flex;align-items:center;gap:5px}
.ret-row .rr-na i{font-size:14px}
.ret-row .rr-acts{display:flex;gap:7px;flex:none;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.ret-row{flex-wrap:wrap}.ret-row .rr-acts{width:100%}}

/* ---------------- task rows ---------------- */
.task-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.task-row:last-child{border-bottom:0}
.tk-check{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--lg-brd);background:rgba(255,255,255,.04);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:.15s}
.tk-check:hover{color:var(--teal);border-color:var(--teal)}
.tk-check.on{color:var(--green);border-color:transparent}
.task-row .tk-b{flex:1;min-width:0}
.task-row .tk-b b{font-size:13px;font-weight:600;display:block}
.task-row .tk-b small{font-size:11px}
.task-row.done .tk-b b{text-decoration:line-through;color:var(--dim)}
.wb-quick{border:1px solid rgba(255,159,10,.3);background:linear-gradient(160deg,rgba(255,159,10,.08),var(--lg))}

/* ============================================================
   PLAYER 360 CARD
   ============================================================ */
/* «сейчас за столом» — первая строка карточки и мост в управление вечером.
   Тон задаёт разметка (--tone): золото у турнира, бирюза у кэша. Строка это
   кнопка во всю ширину — на телефоне в неё целятся большим пальцем, и
   попадать нужно в карточку целиком, а не в стрелку справа. */
.live-seats{display:flex;flex-direction:column;gap:9px;margin:14px 0 2px}
.ls-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:12px 13px;border-radius:17px;color:var(--text);font:inherit;box-shadow:var(--spec);transition:.15s var(--ease-glass);
  border:1px solid color-mix(in srgb,var(--tone) 36%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 14%,transparent),var(--lg))}
.ls-row:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--tone) 60%,transparent)}
.ls-row:active{transform:none}
.ls-ic{width:40px;height:40px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;
  color:var(--tone);background:color-mix(in srgb,var(--tone) 18%,transparent)}
.ls-b{flex:1;min-width:0}
.ls-k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tone)}
.ls-live{width:7px;height:7px;flex:none;border-radius:50%;background:var(--tone);box-shadow:0 0 8px var(--tone);animation:blink 1.3s infinite}
.ls-b b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.2px;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-b small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.ls-go{flex:none;font-size:19px;color:var(--tone);opacity:.75}
@media (max-width:400px){
  .ls-row{gap:10px;padding:11px}
  .ls-ic{width:34px;height:34px;border-radius:11px;font-size:17px}
  .ls-b b{font-size:14.5px}
  .ls-b small{font-size:12px}
}

.member-hero .health-ring{margin-left:auto;flex:none}
.health-ring{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--c) calc(var(--v)*1%),rgba(255,255,255,.08) 0)}
.health-ring .hr-in{width:58px;height:58px;border-radius:50%;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center}
.health-ring .hr-in b{font-family:var(--num);font-weight:700;font-size:22px;line-height:1;color:var(--c)}
.health-ring .hr-in small{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* stat strip */
.stat-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:16px}
@media (max-width:720px){.stat-strip{grid-template-columns:repeat(3,1fr)}}
.st-tile{border-radius:15px;padding:13px 10px;background:var(--lg);border:1px solid var(--lg-brd);box-shadow:var(--spec);text-align:center}
.st-ic{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px;background:rgba(255,255,255,.06);color:var(--muted)}
.st-ic.gold{background:rgba(255,194,75,.16);color:var(--gold)}
.st-ic.teal{background:rgba(45,226,197,.16);color:var(--teal)}
.st-ic.purple{background:rgba(124,92,255,.2);color:#cfc6ff}
.st-v{font-size:17px;line-height:1.1}
.st-l{font-size:10.5px;margin-top:3px}

/* LTV breakdown */
.ltv-bar{height:16px;border-radius:999px;overflow:hidden;display:flex;background:rgba(255,255,255,.06);gap:2px}
.ltv-bar>i{display:block;height:100%}
.ltv-legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:12px}
.lg-item{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.lg-item .dot{width:9px;height:9px;border-radius:3px;flex:none}
.lg-item b{margin-left:auto;font-family:var(--num);color:var(--text)}

/* visit sparkline */
.spark{display:flex;align-items:flex-end;gap:5px;height:90px;padding-top:6px}
.sp-col{flex:1;height:100%;display:flex;align-items:flex-end}
.sp-bar{width:100%;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--teal),#1f9d84);min-height:5px;transition:height .4s var(--ease-glass)}
.spark-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);margin-top:6px}
.mini-kv{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:5px 0}
.mini-kv b{font-weight:700}

/* next-best-action */
.nba{border:1px solid color-mix(in srgb,var(--tone) 34%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 10%,transparent),var(--lg))}
.nba .nba-h{font-size:16px;font-weight:800;letter-spacing:-.2px}
.nba .nba-s{font-size:13px;margin-top:4px;line-height:1.45}
.nba .nba-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* tags editor */
.tag-edit{display:flex;flex-wrap:wrap;gap:7px}
.mtag.big{font-size:12px;padding:5px 10px;border-radius:9px;gap:6px}
.mtag.big .ti-x{font-size:13px;cursor:pointer;opacity:.6}
.mtag.big .ti-x:hover{opacity:1;color:var(--red)}

/* communications timeline */
.comms{display:flex;flex-direction:column}
.comm-item{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.comm-item:last-child{border-bottom:0}
.comm-item .ci-ic{width:30px;height:30px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:rgba(255,255,255,.05)}
.comm-item .ci-b{flex:1;min-width:0;font-size:13px;line-height:1.4}
.comm-item .ci-t{font-size:10.5px;color:var(--dim);font-family:var(--num);margin-bottom:2px;text-transform:uppercase;letter-spacing:.3px}

/* ============================================================
   ЖУРНАЛ БАЛЛОВ (ui/points.js)
   ============================================================ */
/* Строка отвечает на «за что», поэтому повод — главное в ней и набран крупно,
   а вид движения (турнир, розыгрыш, правка) уехал в подпись значком и словом.
   Сумма справа и цветом: минус в журнале лояльности обязан читаться с одного
   взгляда — именно его приходят искать. */
.pt-log{display:flex;flex-direction:column}
.pt-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.pt-row:last-child{border-bottom:0}
.pt-ic{width:30px;height:30px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:rgba(255,255,255,.05);color:var(--muted)}
.pt-ic.gold{color:var(--gold);background:rgba(255,197,79,.12)}
.pt-ic.teal{color:var(--teal);background:rgba(45,226,197,.12)}
.pt-ic.purple{color:var(--p1);background:rgba(108,75,255,.16)}
.pt-ic.amber{color:var(--amber);background:rgba(255,159,10,.12)}
.pt-b{flex:1;min-width:0}
.pt-b b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.pt-b small{display:block;font-size:11px;margin-top:2px}
/* Число и его пояснение — одной колонкой справа: так «+100» и «стало 340»
   читаются как одна мысль, а не как две цифры в разных концах строки. */
.pt-d{flex:none;text-align:right;line-height:1.25}
.pt-d b{font-size:15px}
.pt-d small{display:block;font-size:10.5px}

/* Быстрые суммы и поводы в окне начисления: подсказки в одно касание, поле
   рядом остаётся свободным. */
.pt-quick{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}

/* Шапка журнала: на телефоне заголовок и две кнопки в одну строку не влезают —
   «Журнал баллов» переносится, и кнопки прижимаются к обрывку слова. Поэтому на
   узком экране они уходят строкой ниже, во всю ширину. */
@media (max-width: 560px) {
  .pt-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .pt-head > div { display: flex; }
  .pt-head > div .btn { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Переработка раздела «Игроки»: классы, нормали, очередь дел, сценарии.
   Заменяет RFM-сетку (.rfm-grid / .rfm-card) и «кампании» прошлой версии.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- чипы класса и состояния по норме ---------------------------------- */
.cls-chip, .norm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--lc); border: 1px solid color-mix(in srgb, var(--lc) 40%, transparent);
  background: color-mix(in srgb, var(--lc) 12%, transparent);
  white-space: nowrap;
}
.cls-chip i, .norm-chip i { font-size: 12px; }

/* ---- матрица «класс × норма» --------------------------------------------
   Заменила RFM-сетку. Девять клеток, и каждая — не ярлык, а список людей:
   клик уводит в базу с этим фильтром. */
.crm-matrix {
  display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 6px; align-items: center;
}
.crm-matrix .mx-h {
  font-size: 11px; font-weight: 700; color: var(--muted); text-align: center;
  text-transform: uppercase; letter-spacing: .04em;
}
.crm-matrix .mx-r {
  font-size: 12px; font-weight: 700; color: var(--lc); padding-right: 8px; white-space: nowrap;
}
.crm-matrix .mx-c {
  border: 1px solid var(--lg-brd); background: var(--lg); border-radius: var(--r-sm);
  padding: 10px 0; font-family: var(--num); font-size: 18px; font-weight: 700;
  color: var(--dim); cursor: default; transition: .15s var(--ease-glass);
}
.crm-matrix .mx-c.has { color: var(--text); cursor: pointer; }
.crm-matrix .mx-c.has:hover { background: var(--lg-strong); transform: translateY(-1px); }
.crm-matrix .mx-c.hot { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }

/* ---- очередь дел: строка повода ---------------------------------------- */
.rr-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--muted); }
.rr-meta i { font-size: 13px; margin-right: 3px; }

/* ---- выбор пачкой ------------------------------------------------------- */
.pick, .pick-all {
  background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 6px 0 0;
  font-size: 15px; line-height: 1;
}
.pick:hover, .pick-all:hover { color: var(--teal); }
.dt-row.picked { background: color-mix(in srgb, var(--teal) 8%, transparent); }
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
}
.bulk-bar b { font-family: var(--num); font-size: 16px; }
.bulk-bar .bb-acts { display: flex; gap: 6px; flex-wrap: wrap; }

.base-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

/* ---- сценарии ----------------------------------------------------------- */
.flow-list { display: flex; flex-direction: column; gap: 10px; }
.flow-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--lg); border: 1px solid var(--lg-brd);
}
.flow-row.off { opacity: .55; }
.flow-row .fl-i { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.flow-row .fl-i b { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-row .fl-t { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 2px; }
.flow-row .fl-stat { display: flex; gap: 18px; }
.flow-row .fl-stat > div { text-align: center; }
.flow-row .fl-stat b { display: block; font-size: 18px; }
.flow-row .fl-stat small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.flow-row .fl-acts { display: flex; gap: 6px; }

/* ---- дела в карточке игрока -------------------------------------------- */
.nba-duty {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--lg-brd);
}
.nba-duty:first-of-type { border-top: 0; }
.nba-duty .nd-i { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.nba-duty .nd-g { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.nba-duty .nd-a { display: flex; gap: 6px; }

/* ---- «не писать» -------------------------------------------------------- */
.quiet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--lg); border: 1px solid var(--lg-brd);
}
.quiet-row b { display: block; font-size: 13px; }
.quiet-row small { font-size: 11.5px; line-height: 1.4; }

@media (max-width: 700px) {
  .crm-matrix { font-size: 11px; }
  .crm-matrix .mx-c { padding: 8px 0; font-size: 15px; }
  .flow-row .fl-stat { gap: 12px; width: 100%; justify-content: space-around; }
}

/* ---------- пост в бот клуба: форма и предпросмотр ----------------------
   Предпросмотр здесь не украшение. Пост уходит в ЧУЖОЙ рендер (бот клуба), и
   единственный способ не отправить кашу — показать хосту, что увидит человек,
   ДО нажатия. Поэтому окно поста стоит в форме, а не в справке. */
.post-box{margin:4px 0 14px;padding:12px;border-radius:16px;background:var(--sunk);border:1px solid var(--lg-brd)}
.post-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.post-h b{display:inline-flex;align-items:center;gap:6px;color:var(--teal)}
.post-h small{font-size:11.5px}
.post-prev{margin-top:4px}
.pp-cap{font-size:11px;color:var(--dim);margin:8px 0 6px;line-height:1.45}
/* Пузырь сообщения: тёмный, как в мессенджере, а не как карточка консоли, —
   иначе хост сверяет пост с интерфейсом Club OS, а не с тем, что увидит игрок. */
.pp-msg{border-radius:14px;overflow:hidden;background:#1b1d26;border:1px solid rgba(255,255,255,.07);padding:0 0 2px}
.pp-img{height:120px;background-size:cover;background-position:center;background-color:#0f1118}
.pp-h{display:block;padding:10px 12px 0;font-size:14px;font-weight:800;line-height:1.3}
.pp-t{padding:6px 12px 10px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.pp-ev{display:flex;gap:8px;align-items:center;margin:0 12px 10px;padding:8px 10px;border-radius:11px;
  background:rgba(45,226,197,.10);border:1px solid rgba(45,226,197,.22);font-size:12.5px}
.pp-ev i{color:var(--teal);font-size:16px}
.pp-ev span{display:flex;flex-direction:column;line-height:1.3}
.pp-ev small{color:var(--muted);font-size:11.5px}
.pp-gift{display:flex;gap:7px;align-items:center;margin:0 12px 10px;font-size:12.5px;color:var(--gold)}
/* Кнопку рисует БОТ, не мы: здесь она показана так, как её обычно рисуют
   мессенджеры, — во всю ширину под сообщением. */
.pp-btn{margin:0 8px 8px;padding:9px;border-radius:10px;text-align:center;font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.06);border:1px solid var(--lg-brd);color:var(--teal)}