/* ══════════════════════════════════════════════════════════════════
   Карточки категорий/людей «Кредитсов» — общая вёрстка для превью в
   дашборде стримера (зеркалит публичную страницу) и самой публичной
   страницы (streamer_public.html). Раньше стили были продублированы в
   обоих местах по отдельности.
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.2); border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: rgba(167,139,250,0.2) transparent; }
.sidebar-avatar { width: 320px; height: 320px; border-radius: 50%; object-fit: cover; background: var(--credits-avatar-bg-color, var(--surface)); border: 1px solid var(--credits-avatar-border-color, var(--border)); box-shadow: 0 0 0 6px rgba(255,255,255,0.03); }
.sidebar-avatar.placeholder { display: flex; align-items: center; justify-content: center; font-size: 56px; }
.sidebar-name { font-family: var(--credits-streamer-name-font, "Caveat", cursive); font-size: var(--credits-streamer-name-font-size, 42px); font-weight: var(--credits-streamer-name-font-weight, 700); color: var(--credits-streamer-name-color, var(--accent)); line-height: 1; }
.sidebar-bio { color: var(--credits-bio-color, var(--muted)); font-family: var(--credits-bio-font, inherit); font-size: var(--credits-bio-font-size, 14px); font-weight: var(--credits-bio-font-weight, 400); line-height: 1.65; max-width: 260px; white-space: pre-line; }
.categories {
    display: flex; flex-direction: column; gap: 14px;
    
    min-width: min(724px, calc(100vw - 440px));
  }
.cat-row.has-gallery .cat-info { flex: 0 0 170px; width: 170px; }
.cat-row.has-gallery .cat-people { flex: 1 1 auto; min-width: 0; contain: none; }
.cat-row.has-gallery .cat-gallery { margin-left: auto; }
.cat-info { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cat-title { font-size: var(--credits-cat-title-font-size, 18px); font-weight: var(--credits-cat-title-font-weight, 400); color: var(--credits-cat-title-color, var(--text)); font-family: var(--credits-cat-title-font, inherit); letter-spacing: 0.01em; margin-bottom: 5px; }
.cat-desc { color: var(--credits-cat-desc-color, var(--muted)); font-family: var(--credits-cat-desc-font, inherit); font-size: var(--credits-cat-desc-font-size, 13px); font-weight: var(--credits-cat-desc-font-weight, 400); line-height: 1.5; }
.cat-people { min-width: 0; contain: inline-size; display: flex; flex-wrap: wrap; align-content: center; align-items: flex-start; gap: 20px; padding-left: 20px; border-left: 1px solid var(--border); }
.person-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-comment { font-size: var(--credits-person-comment-font-size, 11px); color: var(--credits-person-comment-color, var(--muted)); font-family: var(--credits-person-comment-font, inherit); text-align: center; line-height: 1.35; text-transform: none; letter-spacing: normal; font-weight: var(--credits-person-comment-font-weight, 400); word-break: break-word; }
.cat-gallery { align-self: flex-start; width: 170px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; flex-shrink: 0; cursor: zoom-in; }
.cat-gallery.single .cat-gallery-cell { width: 170px; height: 170px; }
.cat-gallery-cell { position: relative; width: 83.5px; height: 83.5px; border-radius: 10px; overflow: hidden; flex-shrink: 0; z-index: 1; transition: height 0.32s cubic-bezier(.2,.9,.25,1.15), border-radius 0.32s ease; }
.cat-gallery-cell.expanded { z-index: 3; }
.cat-gallery-thumb { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cat-gallery-more { background: rgba(0,0,0,0.55); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cat-gallery-more span { display: block; }
.person-gallery-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 106px; margin-top: 2px; }
.person-gallery-thumb.person-gallery-more { background: rgba(0,0,0,0.6); color: #fff; font-size: 9px; font-weight: 700; line-height: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.person-gallery-thumb.person-gallery-more span { display: block; }
.credits-lightbox { position: fixed; inset: 0; z-index: 1500; background: rgba(6,6,10,0.94); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.credits-lightbox.open { opacity: 1; pointer-events: all; }
.credits-lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 10px; user-select: none; }
.credits-lightbox-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; opacity: 0.7; z-index: 10; }
.credits-lightbox-close:hover { opacity: 1; }
.credits-lightbox-arrow:hover { opacity: 1; background: rgba(255,255,255,0.14); }
.credits-lightbox-arrow.hidden { opacity: 0; pointer-events: none; }
.credits-lightbox-prev { left: 20px; }
.credits-lightbox-next { right: 20px; }