/* 04_media.css — частина style.css, винесена без перестановки правил.
   Налаштування (базове), Галерея з пошуком, Бібліотека.
   Порядок підключення в index.html повторює порядок частин:
   каскад від розділення не змінився (перевірено побайтно). */
/* ── Settings ─────────────────────────────────────────────────────────── */
.set-actions{ display: flex; justify-content: flex-end; margin-bottom: 14px; }
.prov-card{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 16px; display: flex; align-items: center; gap: var(--sp-14);
}
.prov-card .pc-ic{
  width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex: none; background: var(--bg-soft);
}
.prov-card .pc-body{ flex: 1; min-width: 0; }
.prov-card .pc-name{ font: 700 var(--fs-14)/1.3 var(--sans); display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.prov-card .pc-meta{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); margin-top: 4px; }
.prov-card .pc-actions{ flex: none; }

.keys-list{ display: grid; gap: var(--sp-10); }
.key-row{
  display: flex; align-items: baseline; gap: var(--sp-10); padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.key-row .kr-name{ font: 700 var(--fs-12)/1 var(--mono); color: var(--text); background: var(--panel-2); padding: 4px 8px; border-radius: var(--radius-xs); }
.key-row .kr-desc{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); }

/* ── Gallery ──────────────────────────────────────────────────────────── */
.gal-tabs{ display: flex; align-items: center; gap: var(--sp-8); margin-bottom: 16px; }
/* 🛑 АКТИВНА ВКЛАДКА НЕ БУРШТИНОВА. Правило вже записане в skin.css і
   стосується рейки, сегмента й чипа однаково: ВИБІР позначається
   яскравістю, ДІЯ — кольором. Галерею воно просто не зачепило, і тут
   лишався --brand-ink — суцільна бурштинова заливка на слові «Завантажені».

   На екрані виходило два бурштинові активні чипи одночасно («Завантажені»
   і «Всі») плюс бурштинова головна дія. Три теплі предмети — і жоден із
   них не головний.

   Значення взяті з канонічного `.chip.active`, а не підібрані заново. */
.gal-tab.active{ border-color: transparent; color: var(--text); background: var(--fill-3); }
/* ══ МЕДІА-ПЛИТКА ════════════════════════════════════════════════════════════
   Переписано за виміряним у Higgsfield (2026-08-06). Їхня картка — це НЕ
   коробка з рамкою й фоном, у якій лежить картинка. Їхня картка це САМА
   картинка: контейнер без фону (`transparent`), без рамки (`0px`), радіус 8,
   медіа `object-fit: cover` на всю ширину, а підпис — під нею, без падінгів
   і без панелі. Проміжок у сітці 12px.

   Саме це, а не шрифт і не колір, дає різницю «дорого / дешево»: у них
   поверхнею є контент, у нас нею була рамка навколо контенту. Наша плитка
   мала фон --panel, рамку --border-soft, радіус 14 і padding 10/12 — тобто
   чотири шари хрому навколо єдиного, заради чого на неї дивляться. */
.gal-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-12); }
.gal-item{
  background: none; border: 0; border-radius: 0;
  display: flex; flex-direction: column; gap: var(--sp-8);
}
.gal-thumb{
  position: relative; aspect-ratio: 1; background: var(--bg-soft);
  border-radius: var(--ctl-radius-sm); overflow: hidden;
}
.gal-thumb img, .gal-thumb video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumb .mi-kind{
  position: absolute; left: 6px; bottom: 6px; font-size:  var(--fs-10); background: rgba(0,0,0,.55);
  padding: 1px 6px; border-radius: var(--radius-xs); color: #fff;
}
.gal-thumb{ transition: filter var(--t-fast) var(--ease); }
.gal-item:hover .gal-thumb{ filter: brightness(1.08); }
.gal-item:active .gal-thumb{ filter: brightness(.85); }
/* Підпис під медіа, а не в падінг-коробці. Розміри — їхні: 13/400 назва,
   11/400 приглушеним для дати. Дрібний текст під картинкою читається як
   підпис до роботи; той самий текст у панелі — як поле форми. */
.gal-body{ padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.gal-name{ font: 400 var(--fs-13)/1.35 var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-body .gp-date, .gal-body .lib-profile-updated{ font: 400 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }
.gal-actions{ display: flex; gap: var(--sp-6); }
.gal-actions .btn{ flex: 1; padding: 6px 8px; font-size:  var(--fs-11); }

.gal-cost-badge{
  position: absolute; right: 6px; bottom: 6px; font: 600 var(--fs-10)/1 var(--sans); background: rgba(0,0,0,.55);
  padding: 3px 6px; border-radius: var(--radius-xs); color: #fff; white-space: nowrap;
}
.gal-report{
  display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 14px; font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text);
}
.gal-report-unaccounted{ font: 600 var(--fs-11)/1.3 var(--sans); color: var(--text-dim); }

/* ── Пошук і фільтри галереї ──────────────────────────────────────────── */
.gal-filters{ display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; margin-bottom: 14px; }
.gal-search{
  flex: 1 1 240px; min-width: 0; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--text);
  font: 600 var(--fs-12)/1.2 var(--sans);
}
.gal-search:focus{ outline: none; border-color: var(--brand-ink); }
.gal-search::placeholder{ color: var(--text-mute); }
.gal-kinds{ display: flex; gap: var(--sp-6); flex: 0 0 auto; }
.gal-kinds .chip.active{ border-color: transparent; color: var(--on-brand); background: var(--brand-ink); }

/* Модалка «додати в бібліотеку» — використовує наявні .modal-overlay/
   .modal-card, свого тут лише список карток. */
.gal-lib-sub{ font: 600 var(--fs-12)/1.45 var(--sans); color: var(--text-dim); padding: 0 4px 10px; overflow-wrap: anywhere; }
.gal-lib-list{ max-height: 52vh; overflow-y: auto; }
.gal-lib-group + .gal-lib-group{ margin-top: 14px; }
.gal-lib-group-head{
  font: 700 var(--fs-11)/1 var(--sans);
  color: var(--text-mute); margin-bottom: 7px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.gal-lib-row{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10);
  padding: 9px 12px; margin-bottom: 5px; border-radius: var(--ctl-radius-sm); cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--panel-2); color: var(--text);
  font: 600 var(--fs-13)/1.3 var(--sans); text-align: left;
  transition: border-color var(--t-fast) var(--ease);
}
.gal-lib-row:hover:not(:disabled){ border-color: var(--brand-ink); }
.gal-lib-row:disabled{ opacity: .55; cursor: default; }
.gal-lib-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gal-lib-count{ flex: 0 0 auto; font: 600 var(--fs-10)/1 var(--mono); color: var(--text-mute); }

/* ── Library ──────────────────────────────────────────────────────────── */
.lib-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; margin-bottom: 16px; }
.lib-tabs{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.lib-tab.active{ border-color: transparent; color: var(--on-brand); background: var(--brand-ink); }

.lib-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-14); }
.lib-card{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: var(--t-fast) var(--ease);
}
.lib-card:hover{ border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.lib-thumb{ position: relative; aspect-ratio: 1; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; }
.lib-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* 🛑 ПЕРСОНАЖА ОБИРАЮТЬ ЗА ОБЛИЧЧЯМ, А НЕ ЗА СВЕТРОМ.
   Портрет знімається вертикально (9:16, від середини стегна вгору), а
   мініатюра була КВАДРАТНОЮ з `object-fit: cover` — тобто вікно ставало
   посеред кадру й показувало торс, зрізавши голову зверху. У каталозі з
   одинадцяти людей це робить усіх однаковими.

   3:4 замість 1:1 показує 75% висоти кадру замість 56%, а зсув угору
   ставить це вікно там, де обличчя.

   Локація тепер знімається тим самим вертикальним кадром 9:16, тож і їй
   потрібні 3:4 — але БЕЗ зсуву вгору: у кімнати немає обличчя, і центр
   кадру тут і є те, що показують. Товар лишається квадратним: його фото
   приносить клієнт, і воно буває яким завгодно. */
.lib-card[data-type="character"] .lib-thumb,
.lib-card[data-type="location"] .lib-thumb{ aspect-ratio: 3 / 4; }
.lib-card[data-type="character"] .lib-thumb img{ object-position: 50% 12%; }
.lib-thumb-ph{ font-size: 38px; opacity: .5; }
.lib-body{ padding: 10px 12px; display: flex; flex-direction: column; gap: var(--sp-6); }
.lib-name{ font: 700 var(--fs-12)/1.35 var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Detail modal */
.lib-detail-card{ max-width: 640px; }
.lib-detail-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-10); margin-bottom: 14px; }
.lib-detail-head-actions{ display: flex; gap: var(--sp-6); flex: none; }
.lib-name-input{
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 11px; font: 700 var(--fs-15)/1.3 var(--sans);
}
.lib-name-input:focus{ outline: none; border-color: var(--accent); }

.lib-actions-row{ display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; margin: 4px 0 16px; }

.lib-media-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-8); margin-bottom: 10px; }
.lib-media-item{
  position: relative; aspect-ratio: 1; border-radius: var(--ctl-radius-sm); overflow: hidden; cursor: zoom-in;
  background: var(--bg-soft); border: 1px solid var(--border-soft);
}
.lib-media-item img, .lib-media-item video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-media-item .mi-del{
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: none; font-size:  var(--fs-10); cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.lib-media-item:hover .mi-del{ display: flex; }
.lib-media-actions{ display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: 16px; }

/* Імпорт за посиланням. Рядок стоїть першим у формі, але виглядає тихіше за
   поля під ним: це коротший шлях, а не обовʼязковий крок — без посилання
   форма має лишатись такою самою, як була. */
.lib-import{ padding-bottom: 4px; }
.lib-import-row{ display: flex; gap: var(--sp-8); align-items: center; }
.lib-import-row .lib-name-input{ flex: 1 1 auto; min-width: 0; font-size:  var(--fs-13); font-weight: 600; }
.lib-import-row .btn{ flex: 0 0 auto; }
.lib-import-note{ margin-top: 6px; font: 600 var(--fs-11)/1.45 var(--sans); color: var(--text-mute); }
.lib-import-note.warn{ color: var(--warn); }
.lib-import-note.bad{ color: var(--danger); }
.lib-import-imgs{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--sp-6); margin-top: 8px;
}
.lib-import-img{
  position: relative; aspect-ratio: 1; border-radius: var(--ctl-radius-sm); overflow: hidden; cursor: pointer;
  background: var(--bg-soft); border: 2px solid var(--border-soft); opacity: .45;
  transition: opacity .12s, border-color .12s;
}
/* Невибране фото приглушене, а не сховане: людина має бачити, ЩО саме вона
   не бере, інакше «магазин дав три фото» й «я зняв галочки з чотирьох» на
   екрані виглядають однаково. */
.lib-import-img.on{ opacity: 1; border-color: var(--accent); }
.lib-import-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-import-img input{ position: absolute; top: 4px; left: 4px; z-index: 1; cursor: pointer; }

.lib-run-panel{
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 16px;
}
.lib-run-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); margin-bottom: 8px; }
.lib-run-title{ font: 700 var(--fs-12)/1.3 var(--sans); color: var(--text); }
.lib-run-log{
  font:var(--fs-12)/1.6 var(--mono); max-height: 180px; overflow-y: auto;
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 10px 12px;
}
.lib-run-log:empty{ display: none; }
.lib-run-log .ln{ color: var(--text-dim); border-bottom: 1px dashed var(--border-soft); padding: 3px 0; }
.lib-run-log .ln:last-child{ border-bottom: none; }

.lib-profile.md-body h1{ margin: 18px 0 12px; font: 700 17px/1.3 var(--sans); }
.lib-profile.md-body h2{
  margin: 22px 0 10px; padding: 6px 0 6px 12px;
  font: 700 var(--fs-15)/1.3 var(--sans);
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-t-wash-1), transparent 70%);
  border-radius: 0 8px 8px 0;
}
.lib-profile.md-body h3{ margin: 16px 0 8px; font: 700 var(--fs-13)/1.3 var(--sans); color: var(--accent);letter-spacing: .4px; font-size:  var(--fs-12); }
.lib-profile.md-body h1:first-child, .lib-profile.md-body h2:first-child, .lib-profile.md-body h3:first-child{ margin-top: 0; }
.lib-profile.md-body p{ margin: 0 0 10px; font-size:  var(--fs-13); line-height: 1.7; color: var(--text-dim); }
.lib-profile.md-body ul, .lib-profile.md-body ol{ margin: 0 0 12px; padding-left: 20px; font-size:  var(--fs-13); color: var(--text-dim); }
.lib-profile.md-body li{ margin-bottom: 6px; line-height: 1.6; }
.lib-profile.md-body ul li::marker{ color: var(--accent); }
.lib-profile.md-body strong{ color: var(--text); }
.lib-profile.md-body code{ font:var(--fs-12)/1.4 var(--mono); background: var(--code-bg); padding: 1px 5px; border-radius: var(--radius-xs); }
.lib-profile.md-body blockquote{
  margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid var(--border);
  background: var(--panel-2); border-radius: 0 8px 8px 0; color: var(--text-dim); font-size:  var(--fs-13);
}
.lib-profile.md-body hr{ border: none; border-top: 1px dashed var(--border-soft); margin: 18px 0; }
.lib-profile.md-body table{ border-collapse: collapse; margin: 0 0 12px; font-size:  var(--fs-12); width: 100%; }
.lib-profile.md-body th, .lib-profile.md-body td{ border: 1px solid var(--border-soft); padding: 6px 10px; text-align: left; color: var(--text-dim); }
.lib-profile.md-body th{ color: var(--text); background: var(--panel-2); }

/* Inline color swatch for #RRGGBB mentions (decorateProfileHtml, library.js) */
.color-chip{
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: 2px 8px 2px 4px; margin: 0 2px; vertical-align: baseline;
  font: 600 var(--fs-11)/1.4 var(--mono); color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 999px;
  white-space: nowrap;
}
.color-chip i{
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(255,255,255,.25); box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.lib-profile-updated{ font: 600 var(--fs-11)/1 var(--mono); color: var(--text-mute); margin-bottom: 8px; }

.lib-lightbox{ z-index: 110; cursor: zoom-out; }
.lib-lightbox-inner{ max-width: min(90vw, 520px); max-height: 88vh; display: flex; }
.lib-lightbox-inner img, .lib-lightbox-inner video{ max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: var(--radius); display: block; margin: auto; box-shadow: 0 18px 50px rgba(0,0,0,.45); background: #0b0b0d; }

@media (max-width: 640px){
  .lib-grid{ grid-template-columns: repeat(2, 1fr); }
  .lib-detail-card{ max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  #libDetailModal{ padding: 0; }
}


/* ═══ СТАН ПІДКЛЮЧЕННЯ — СЛОВО Й КРАПКА ══════════════════════════════════
   Були бейджі: зелений «підключено», червоний «не підключено». Зелений на
   теплій базі — єдиний холодний тон на екрані, тобто стороння пляма. Але
   головне інше: колір у продукті це мова поломки, і коли ним світиться
   НОРМАЛЬНИЙ стан, справжня поломка втрачає голос — червоний бейдж поруч
   із зеленим читається як «ще один бейдж», а не як «терміново».

   Тон один, різниця в яскравості й у слові. Аварія лишається кольором. */
.pc-state{
  display:inline-flex; align-items:center; gap:var(--sp-6); margin-left:auto;
  font-size: var(--fs-12); color:var(--text-dim); white-space:nowrap;
}
.pc-dot{
  width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  background:var(--text-mute);
}
.pc-state-off{ color:var(--danger) }
.pc-state-off .pc-dot{ background:var(--danger) }

/* Відповідь першим рядком екрана. Набрана як заголовок, а не як бейдж:
   це головне речення сторінки, а не мітка збоку. Без рамки — форму тримає
   заливка; аварія позначена кольором СЛОВА, бо колір тут це сенс. */
.set-answer{
  margin:0 0 18px; padding:14px 18px; border-radius:var(--radius-md);
  background:var(--fill-1); font-size:17px; font-weight:600;
  color:var(--text); line-height:1.35;
}
.set-answer-bad{ color:var(--danger) }
.set-answer-warn{ color:var(--warn) }

/* ── Створення персонажа ────────────────────────────────────────────────── */
.lib-toolbar-actions{ display: flex; gap: var(--sp-8); align-items: center; }
.lib-make-card{ max-width: 560px; }
.lib-make-lead{
  margin: 0 0 14px; font: 400 var(--fs-12)/1.5 var(--sans); color: var(--text-mute);
}
.lib-make-chips{ display: flex; flex-wrap: wrap; gap: var(--sp-6); }
/* Ціна — число-герой над кнопкою, як у композері: найдорожчий екран мусить
   показувати вартість ДО натискання, а не лишати її на виписку. */
.lib-make-cost{
  margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--fill-1); font: 400 var(--fs-12)/1.4 var(--sans);
  color: var(--text-mute);
}
.lib-make-cost b{ font: 700 var(--fs-18)/1 var(--sans); color: var(--text); }
.lib-make-cost .n{ color: var(--text-mute); }
.lib-make-log{
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--fill-1); font: 400 var(--fs-11)/1.5 var(--sans);
  color: var(--text-mute);
}

/* ── Картка сутності: заголовок, а не анкета ────────────────────────────── */

/* Ім'я редагується, але виглядає як ЗАГОЛОВОК. Рамка навколо нього робила
   з картки форму: перше, що бачило око, була коробка для вводу, а не те,
   як людину звуть. Коробка з'являється на наведенні й у фокусі — тобто
   рівно тоді, коли її призначення стає доречним. */
.lib-det-title{
  flex: 1; min-width: 0;
  padding: 4px 8px; margin-left: -8px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  font: 700 var(--fs-18)/1.3 var(--sans);
}
.lib-det-title:hover{ background: var(--fill-1); }
.lib-det-title:focus{
  outline: none; background: var(--fill-1); border-color: var(--accent-edge);
}
.lib-detail-head-actions{ align-items: center; }

/* Опис — шість рядків замість двох. Персонажа описує абзац, і читати його
   у віконці на три рядки зі смужкою прокрутки означає не читати. */
/* Висоту ставить JS під сам текст (див. grow() у library.js) — тут лише
   нижня межа й заборона внутрішньої прокрутки: смужка всередині поля і є
   те, що робило опис нечитабельним. */
.lib-det-desc{ min-height: 96px; max-height: 420px; overflow-y: auto; resize: vertical; }

/* «Зберегти» показується, лише коли є що зберігати (див. syncDirty). */
.lib-det-save-row{
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-10); margin-top: 10px;
}
.lib-det-dirty{ font: 400 var(--fs-11)/1 var(--sans); color: var(--text-mute); }

/* Видалення — тихий рядок унизу, відділений лінією. Незворотна дія не має
   стояти за сорок пікселів від «Закрити». */
.lib-det-danger{
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.lib-det-del{ color: var(--danger, #e5484d); }
.lib-det-del:hover{ background: color-mix(in srgb, var(--danger, #e5484d) 12%, transparent); }

/* Плитки медіа — рівні квадрати з підписами ролі. Раніше вони мали різні
   пропорції (портрет 9:16 поруч із квадратним аркушем) і читались як два
   випадкові файли, а не як «обкладинка» і «аркуш». */
.lib-media-item{ position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); }
.lib-media-item img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-tag{
  position: absolute; top: 5px; left: 5px; padding: 2px 7px;
  border-radius: 999px; background: rgba(0,0,0,.62); color: #fff;
  font: 600 var(--fs-10)/1.5 var(--sans); pointer-events: none;
  letter-spacing: .02em;
}
.mi-tag-anchor{ background: color-mix(in srgb, var(--accent) 82%, black); color: var(--on-brand); }
.mi-cover{
  position: absolute; top: 5px; left: 5px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: var(--fs-11); line-height: 22px; padding: 0; cursor: pointer;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.lib-media-item:hover .mi-cover{ opacity: 1; }

/* ── Опис по темах ──────────────────────────────────────────────────────── */
.lib-traits{
  display: grid; gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  overflow: hidden;
}
.lib-trait{
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--sp-10); padding: 9px 11px; background: var(--bg-soft);
}
.lib-trait-k{
  font: 700 var(--fs-10)/1.7 var(--sans); color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .04em;
}
.lib-trait-v{
  font: 400 var(--fs-12)/1.55 var(--sans); color: var(--text);
  outline: none; border-radius: 3px; min-width: 0;
}
.lib-trait-v:focus{ box-shadow: 0 0 0 2px var(--accent-edge); }
.lib-trait-raw{
  margin-top: 8px; padding: 0; border: 0; background: none;
  color: var(--text-mute); font: 600 var(--fs-11)/1 var(--sans); cursor: pointer;
}
.lib-trait-raw:hover{ color: var(--text); }
@media (max-width: 560px){
  .lib-trait{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
}