/* ==========================================================================
   ПАНЕЛЬ БЛОКАМИ — переделка

   Что исправлено против прошлой версии:
     • убрано гашение блоков (pointer-events: none) — оно блокировало
       живые клики мышью, из-за чего не работали картинки и настройки;
     • «Добавить плашку» вернулась ВНУТРЬ рамки плашки;
     • «Подложка под текст» вложена внутрь плашки как вспомогательная
       секция со своей стрелкой;
     • блок картинок называется «ВСТАВИТЬ КАРТИНКУ».

   Блоки всегда открыты и всегда кликабельны.
   ========================================================================== */

.pb-block {
  --blk: #888;
  --blk-fill: rgba(255,255,255,0.03);
  position: relative;
  border: 1.5px solid var(--blk);
  border-radius: 14px;
  background: var(--blk-fill);
  padding: 12px 14px 14px;
  margin: 0 0 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}

.pb-block.pb-base   { --blk: #EFD7B8; --blk-fill: rgba(239,215,184,0.045); }
.pb-block.pb-img    { --blk: #FA9EBC; --blk-fill: rgba(250,158,188,0.05);  }
.pb-block.pb-plate  { --blk: #C73459; --blk-fill: rgba(199,52,89,0.07);    }
.pb-block.pb-ribbon { --blk: #90B48F; --blk-fill: rgba(144,180,143,0.06);  }

/* вложенная секция подложки — внутри плашки */
.pb-block .pb-block.pb-ribbon {
  margin: 14px 0 2px;
  padding: 11px 12px 12px;
}

/* ---- заголовок ---- */
.pb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  user-select: none;
}
.pb-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--blk);
  margin: 0;
}
.pb-arrow {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--blk);
  background: transparent;
  color: var(--blk);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.pb-arrow:hover { background: color-mix(in srgb, var(--blk) 18%, transparent); }
.pb-block.pb-collapsed > .pb-head .pb-arrow { transform: rotate(-90deg); }

/* тело сворачивается только по клику на свою стрелку */
.pb-body { display: block; }
.pb-block.pb-collapsed > .pb-body { display: none; }

/* ---- кнопки внутри блока — в тон блоку ---- */
.pb-block .pb-tinted {
  background: color-mix(in srgb, var(--blk) 22%, #1b1f27) !important;
  border: 1px solid color-mix(in srgb, var(--blk) 62%, transparent) !important;
  color: #f2f5fa !important;
  transition: background .16s ease, border-color .16s ease;
}
.pb-block .pb-tinted:hover {
  background: color-mix(in srgb, var(--blk) 38%, #1b1f27) !important;
  border-color: var(--blk) !important;
}
.pb-block .pb-tinted:active {
  background: color-mix(in srgb, var(--blk) 55%, #1b1f27) !important;
}

.pb-block label { color: #dfe4ec; }
.pb-block .pb-sub { color: var(--blk) !important; font-weight: 600; }
.pb-block input[type="range"] { accent-color: var(--blk); }
.pb-block hr { border-color: color-mix(in srgb, var(--blk) 30%, transparent); }

/* внутренние коробочки настроек не рисуют свою рамку — она у блока */
.pb-block #tbSettings,
.pb-block #tbRibbonSettings,
.pb-block #imgSettings {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* кнопка «Добавить плашку» — внутри рамки плашки */
#pbAddPlate {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(180deg, #C73459 0%, #a82a49 100%) !important;
  border: 1px solid #C73459 !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(199,52,89,0.25);
  transition: filter .16s ease, transform .06s ease;
}
#pbAddPlate:hover  { filter: brightness(1.12); }
#pbAddPlate:active { transform: translateY(1px); }

/* ---- телефон ---- */
@media (max-width: 900px) {
  .pb-block { padding: 10px 11px 12px; margin-bottom: 13px; border-radius: 12px; }
  .pb-title { font-size: 12px; }
  .pb-arrow { width: 30px; height: 30px; }
/* Плашка на телефоне работает — блок настроек нужен. */
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .pb-block .pb-tinted { background: #2b3242 !important; border-color: #3a4254 !important; }
  .pb-arrow:hover { background: rgba(255,255,255,0.08); }
}

/* ==========================================================================
   Блок «Плашка» не сворачивается сам

   В images.js есть строка, которая при клике мимо плашки прячет
   настройки напрямую: tbPanel.style.display = 'none'.
   Из-за неё блок выглядел свернувшимся без спроса.

   Настройки остаются на месте всегда. Свернуть блок можно
   только стрелкой в его заголовке.
   ========================================================================== */
.pb-block #tbSettings { display: block !important; }

/* ============================================================
   Рамка для верхнего тулбара — блок «Текст и Холст»
   ============================================================ */
/* Тулбар живёт внутри блока «Платформа и текст», поэтому своя рамка ему
   больше не нужна — она дублировала бы рамку блока. Оставляем отступ и фон
   чуть темнее, чтобы кнопки читались как отдельная группа. */
.pb-base .toolbar {
  border: 1px solid #EFD7B840 !important;
  background: #0d0f13 !important;
  border-radius: 10px !important;
  margin-top: 10px;
}
.toolbar button:hover:not(:disabled) { background: #EFD7B8; color: #1a1d24; }

/* ============================================================
   Тулбар внутри блока плашки. Кнопки в тон блоку — зелёный #10b981.
   ============================================================ */
.tb-toolbar {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 8px; margin: 8px 0 12px;
  background: #10b98114;
  border: 1px solid #10b981;
  border-radius: 10px;
}
.tb-toolbar button {
  flex: none; min-width: 32px; height: 32px; padding: 0 6px;
  background: #1c3b32; color: #d7f5ea;
  border: 1px solid #10b98155; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer;
}
.tb-toolbar button:hover { background: #10b981; color: #08130f; }
.tb-toolbar button:active { transform: translateY(1px); }
.tb-toolbar input[type=color] {
  width: 32px; height: 32px; padding: 0; border: 1px solid #10b98155;
  border-radius: 6px; cursor: pointer; overflow: hidden; background: none;
}
.tb-toolbar .tb-toolbar-divider {
  width: 1px; height: 22px; background: #10b98166; margin: 0 3px;
}