/*
  Studio Wide Design Fix v1.5.26.30
  Подключается ПОСЛЕ styles.css.
  Цель: широкий интерфейс как на хорошем варианте, без узкого "острова".
*/

:root{
  --app-max-width:1560px;
  --wide-page-pad:clamp(18px,2.2vw,36px);
  --wide-panel-radius:26px;
  --wide-card-radius:22px;
  --wide-stroke:rgba(151,181,255,.13);
  --wide-panel:linear-gradient(180deg,rgba(12,25,52,.88),rgba(5,13,29,.9));
  --wide-panel-soft:linear-gradient(180deg,rgba(15,30,61,.72),rgba(7,15,31,.8));
  --wide-blue:#4aa7ff;
  --wide-violet:#805bff;
}

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:
    radial-gradient(circle at 6% 0%,rgba(126,70,137,.36),transparent 34%),
    radial-gradient(circle at 98% 4%,rgba(44,97,196,.26),transparent 33%),
    linear-gradient(180deg,#08152b 0%,#050d1e 54%,#030816 100%) !important;
}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:#071022}
body::-webkit-scrollbar-thumb{background:rgba(121,151,205,.45);border-radius:999px;border:2px solid #071022}

#app{
  width:min(var(--app-max-width),calc(100vw - var(--wide-page-pad) * 2)) !important;
  max-width:min(var(--app-max-width),calc(100vw - var(--wide-page-pad) * 2)) !important;
  margin:0 auto !important;
  padding:clamp(14px,1.6vw,26px) 0 48px !important;
}

.shell,
.viewer-surface,
.projects-wrap,
.actors-wrap,
.workspace-surface,
.page-enter{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.glass,
.panel,
.head,
.header-topbar{
  border-color:var(--wide-stroke) !important;
  background:var(--wide-panel) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Шапка: широкая, в одну строку, без переносов профиля вниз */
.head,
.header-topbar,
.head-redesign{
  display:grid !important;
  grid-template-columns:minmax(360px,1fr) auto auto !important;
  align-items:center !important;
  gap:18px !important;
  min-height:112px !important;
  padding:22px 26px !important;
  border-radius:28px !important;
}
.header-left{min-width:0 !important;display:flex !important;align-items:center !important;gap:18px !important}
.header-brand,.brand-home-button{min-width:0 !important;text-align:left !important}
.brand-title{
  font-size:clamp(30px,2.4vw,42px) !important;
  line-height:.95 !important;
  letter-spacing:-.045em !important;
  white-space:nowrap !important;
}
.statham-quote-line,.brand-subtitle,.muted{
  max-width:760px;
}
.header-actions-compact,
.header-actions-min,
.head-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
.profile-chip,.user-chip,.profile-button{
  flex:0 0 auto !important;
  min-width:150px !important;
}
.mode-switch,.surface-switch{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.mode-chip.active,.tab.active,.btn.primary{
  background:linear-gradient(135deg,#54b6ff,#3a8eff 55%,#745cff) !important;
  box-shadow:0 10px 30px rgba(63,145,255,.28) !important;
}
.icon-chip,.icon-chip-mini,.top-home-button,.btn,.tab,.mode-chip{
  transition:transform .16s ease,filter .16s ease,border-color .16s ease,background .16s ease !important;
}
.icon-chip:hover,.top-home-button:hover,.btn:hover,.tab:hover,.mode-chip:hover{
  transform:translateY(-1px);
}

/* Верхние вкладки даббера */
.tabs,
.primary-tabs,
.workspace-tabs,
.main-tabs,
.nav-tabs{
  width:100% !important;
  max-width:100% !important;
  margin:18px 0 !important;
  padding:16px !important;
  border-radius:26px !important;
  display:flex !important;
  justify-content:center !important;
  gap:12px !important;
  background:rgba(9,22,47,.66) !important;
  border:1px solid rgba(151,181,255,.11) !important;
}
.tabs .tab,
.primary-tabs .tab,
.workspace-tabs .tab,
.nav-tabs .tab{
  min-width:150px !important;
  height:54px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  font-weight:900 !important;
}

/* Библиотека проектов: широкая медиа-лента, не узкая колонка */
.project-library-shell,
.library-panel,
.projects-library,
.panel:has(.project-library-card){
  width:100% !important;
  max-width:100% !important;
  padding:24px 26px 26px !important;
  border-radius:28px !important;
}
.project-library-head,
.viewer-section-head,
.section-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:16px !important;
  margin-bottom:16px !important;
}
.project-library-viewport,
.project-library-row,
.project-library-track,
.viewer-rail-row,
.viewer-rail-viewport{
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.project-library-viewport::-webkit-scrollbar,
.project-library-row::-webkit-scrollbar,
.project-library-track::-webkit-scrollbar,
.viewer-rail-row::-webkit-scrollbar,
.viewer-rail-viewport::-webkit-scrollbar{display:none}

.project-library-row,
.project-library-track{
  display:flex !important;
  gap:18px !important;
  align-items:stretch !important;
}
.project-library-card,
.project-library-card.expanded,
.project-library-card:not(.compact){
  flex:0 0 clamp(320px,22.6vw,372px) !important;
  width:clamp(320px,22.6vw,372px) !important;
  height:170px !important;
  min-height:170px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,rgba(28,48,83,.9),rgba(8,17,37,.92)) !important;
  border:1px solid rgba(170,198,255,.15) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.26) !important;
}
.project-library-card.compact{
  flex:0 0 clamp(250px,18vw,305px) !important;
  width:clamp(250px,18vw,305px) !important;
  height:142px !important;
  min-height:142px !important;
}
.project-library-card img,
.project-library-media img,
.project-library-poster img,
.viewer-rail-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 24% !important;
}
.project-library-card::after,
.viewer-rail-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:70%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,8,20,.34) 38%,rgba(3,8,20,.92));
}
.project-library-title,.chip-title,.poster-title{
  font-size:clamp(19px,1.35vw,25px) !important;
  line-height:1.05 !important;
  letter-spacing:-.025em !important;
  text-shadow:0 3px 18px rgba(0,0,0,.45) !important;
}
.project-library-meta,.chip-meta{
  font-size:13px !important;
  opacity:.84 !important;
}
.project-library-nav,
.viewer-rail-nav,
.library-arrow,
.rail-arrow{
  width:48px !important;
  height:64px !important;
  border-radius:18px !important;
  background:rgba(8,18,39,.82) !important;
  border:1px solid rgba(150,181,255,.13) !important;
  backdrop-filter:blur(12px) !important;
}
.project-library-card:hover,
.viewer-rail-card:hover{
  transform:translateY(-3px) scale(1.012) !important;
  border-color:rgba(93,174,255,.45) !important;
}

/* Блок О проекте: широкий, не карточка-обрубок */
.project-summary,
.summary-grid,
.project-info-grid,
.project-detail-layout{
  display:grid !important;
  grid-template-columns:minmax(270px,340px) minmax(0,1fr) !important;
  gap:20px !important;
  align-items:start !important;
  width:100% !important;
}
.poster-panel,.project-poster-panel{
  min-width:0 !important;
}
.poster-card,.project-poster,.project-cover{
  width:100% !important;
  max-height:460px !important;
  min-height:360px !important;
  border-radius:26px !important;
}
.project-info-panel,.project-details,.summary-panel{
  min-width:0 !important;
  padding:22px !important;
  border-radius:26px !important;
}
.project-desc-static,.project-description,.desc{
  min-height:auto !important;
  max-height:170px !important;
  overflow:auto !important;
  padding-right:8px !important;
  line-height:1.55 !important;
}
.tags,.summary-actions{
  gap:10px !important;
}
.tag,.status-chip,.project-library-status{
  border-color:rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.065) !important;
}

/* Пользовательский режим: широкий media-service */
.viewer-surface{
  display:grid !important;
  gap:20px !important;
}
.viewer-home-hero,
.viewer-search-hero,
.viewer-catalog-hero{
  width:100% !important;
  min-height:180px !important;
  border-radius:30px !important;
  padding:28px !important;
  background:
    linear-gradient(90deg,rgba(8,18,39,.94),rgba(10,21,49,.75)),
    radial-gradient(circle at 85% 20%,rgba(93,117,255,.25),transparent 35%) !important;
}
.viewer-rail-shell{
  width:100% !important;
  max-width:100% !important;
  padding:24px 26px !important;
  border-radius:28px !important;
}
.viewer-rail-row,.viewer-rail-viewport{
  display:flex !important;
  gap:18px !important;
  overflow-x:auto !important;
  padding:2px 2px 10px !important;
}
.viewer-rail-card{
  position:relative !important;
  flex:0 0 clamp(220px,16vw,270px) !important;
  width:clamp(220px,16vw,270px) !important;
  height:clamp(310px,23vw,380px) !important;
  border-radius:24px !important;
  overflow:hidden !important;
  border:1px solid rgba(170,198,255,.14) !important;
  background:#0b1934 !important;
}
.viewer-rail-hover{
  z-index:3 !important;
}

/* Страница тайтла */
.viewer-title-hero,
.viewer-title-panel,
.viewer-hero-shell{
  width:100% !important;
  min-height:520px !important;
  border-radius:32px !important;
  overflow:hidden !important;
}
.viewer-hero-body,
.viewer-title-hero-body{
  display:grid !important;
  grid-template-columns:minmax(250px,330px) minmax(0,1fr) minmax(300px,440px) !important;
  gap:26px !important;
  align-items:center !important;
  padding:34px !important;
}
.viewer-title-cast-side,
.viewer-cast-list{
  max-height:430px !important;
  overflow:auto !important;
  scrollbar-color:rgba(121,151,205,.45) transparent !important;
}
.viewer-title-cast-side::-webkit-scrollbar,.viewer-cast-list::-webkit-scrollbar,.project-desc-static::-webkit-scrollbar{width:8px}
.viewer-title-cast-side::-webkit-scrollbar-thumb,.viewer-cast-list::-webkit-scrollbar-thumb,.project-desc-static::-webkit-scrollbar-thumb{background:rgba(121,151,205,.42);border-radius:999px}

/* Страница плеера: широкий центрированный просмотр */
.viewer-watch-panel{
  width:100% !important;
  max-width:1360px !important;
  margin:0 auto !important;
  padding:24px !important;
  border-radius:30px !important;
}
.viewer-watch-inner{
  width:100% !important;
  max-width:1280px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.viewer-player-shell,
.viewer-watch-player{
  width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:520px !important;
  max-height:720px !important;
  border-radius:26px !important;
  overflow:hidden !important;
  background:#040914 !important;
  border:1px solid rgba(170,198,255,.16) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.34) !important;
}
.viewer-iframe-player{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
}
.viewer-episode-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  padding:16px 0 4px !important;
}
.viewer-watch-bottom-row{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr) !important;
  gap:18px !important;
  margin-top:16px !important;
}
.viewer-player-note,.viewer-watch-side-stats{
  padding:18px !important;
  border-radius:24px !important;
}

/* Чтобы низ страницы не выглядел пустым */
.panel:empty,.empty:empty{display:none !important}
.projects-wrap > .panel,
.viewer-surface > .panel{
  margin-bottom:18px !important;
}

@media (max-width:1280px){
  :root{--app-max-width:calc(100vw - 28px)}
  .head,.header-topbar,.head-redesign{grid-template-columns:1fr auto !important;min-height:auto !important}
  .brand-title{white-space:normal !important}
  .header-actions-compact,.header-actions-min,.head-actions{flex-wrap:wrap !important}
  .project-library-card,.project-library-card.expanded,.project-library-card:not(.compact){flex-basis:310px !important;width:310px !important}
  .viewer-hero-body,.viewer-title-hero-body{grid-template-columns:260px 1fr !important}
}

@media (max-width:860px){
  #app{width:calc(100vw - 24px) !important;padding-top:12px !important}
  .head,.header-topbar,.head-redesign{display:flex !important;flex-direction:column !important;align-items:stretch !important;padding:18px !important}
  .tabs,.primary-tabs,.workspace-tabs,.main-tabs,.nav-tabs{justify-content:flex-start !important;overflow-x:auto !important;padding:10px !important}
  .tabs .tab,.primary-tabs .tab,.workspace-tabs .tab,.nav-tabs .tab{min-width:130px !important;height:46px !important}
  .project-summary,.summary-grid,.project-info-grid,.project-detail-layout,.viewer-watch-bottom-row{grid-template-columns:1fr !important}
  .project-library-card,.project-library-card.expanded,.project-library-card:not(.compact){flex-basis:78vw !important;width:78vw !important;height:160px !important}
  .viewer-rail-card{flex-basis:58vw !important;width:58vw !important;height:78vw !important;max-height:390px !important}
  .viewer-player-shell,.viewer-watch-player{min-height:unset !important;max-height:none !important}
  .viewer-hero-body,.viewer-title-hero-body{grid-template-columns:1fr !important;padding:20px !important}
}

/*
  HOTFIX v1.5.26.31
  Исправление дабберской библиотеки: карточки больше не вываливаются вправо,
  лента ограничена шириной блока и скроллится внутри себя.
*/
.project-library-shell,
.library-panel,
.projects-library,
.panel:has(.project-library-card){
  overflow:hidden !important;
  max-width:100% !important;
}

.project-library-viewport,
.project-library-scroll,
.library-viewport,
.projects-carousel,
.projects-rail,
.projects-strip,
.viewer-rail-viewport{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.project-library-row,
.project-library-track{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:0 4px 12px !important;
  scroll-snap-type:x proximity !important;
  overscroll-behavior-x:contain !important;
}

.project-library-card,
.project-library-card.expanded,
.project-library-card:not(.compact){
  flex:0 0 clamp(286px, calc((100% - 54px) / 4), 356px) !important;
  width:clamp(286px, calc((100% - 54px) / 4), 356px) !important;
  max-width:356px !important;
  height:168px !important;
  min-height:168px !important;
  scroll-snap-align:start !important;
}

.project-library-card.compact{
  flex:0 0 clamp(240px, calc((100% - 72px) / 5), 292px) !important;
  width:clamp(240px, calc((100% - 72px) / 5), 292px) !important;
  max-width:292px !important;
  height:138px !important;
  min-height:138px !important;
}

.project-library-nav,
.library-arrow,
.rail-arrow{
  z-index:8 !important;
}

@media (max-width:1280px){
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:clamp(270px, calc((100% - 36px) / 3), 330px) !important;
    width:clamp(270px, calc((100% - 36px) / 3), 330px) !important;
  }
}

@media (max-width:860px){
  .project-library-row,
  .project-library-track{padding-bottom:10px !important}
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:78vw !important;
    width:78vw !important;
    max-width:none !important;
    height:160px !important;
  }
}

/*
  HOTFIX v1.5.26.32
  Дабберская библиотека как в удачном референсе:
  ниже карточки, меньше кроп, название помещается в 2 строки.
*/
.project-library-shell,
.library-panel,
.projects-library,
.panel:has(.project-library-card){
  padding:22px 26px 24px !important;
}

.project-library-viewport,
.project-library-scroll,
.library-viewport,
.projects-carousel,
.projects-rail,
.projects-strip{
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.project-library-row,
.project-library-track{
  gap:18px !important;
  align-items:center !important;
  padding:0 58px 0 !important;
  min-height:148px !important;
  max-height:164px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}

.project-library-card,
.project-library-card.expanded,
.project-library-card:not(.compact){
  flex:0 0 clamp(270px, calc((100% - 54px) / 4), 334px) !important;
  width:clamp(270px, calc((100% - 54px) / 4), 334px) !important;
  max-width:334px !important;
  height:132px !important;
  min-height:132px !important;
  max-height:132px !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

.project-library-card.compact{
  flex:0 0 clamp(230px, calc((100% - 72px) / 5), 278px) !important;
  width:clamp(230px, calc((100% - 72px) / 5), 278px) !important;
  max-width:278px !important;
  height:118px !important;
  min-height:118px !important;
  max-height:118px !important;
  border-radius:16px !important;
}

.project-library-card img,
.project-library-media img,
.project-library-poster img,
.viewer-rail-media img,
.project-library-card picture,
.project-library-card .cover,
.project-library-card .poster{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.project-library-card::after,
.viewer-rail-card::after{
  height:82% !important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(3,8,20,.30) 42%,rgba(3,8,20,.92) 100%) !important;
}

.project-library-title,
.project-library-card .title,
.project-library-card [class*="title"],
.chip-title,
.poster-title{
  font-size:clamp(18px,1.15vw,23px) !important;
  line-height:1.02 !important;
  letter-spacing:-.02em !important;
  max-width:92% !important;
  max-height:48px !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  text-wrap:balance !important;
}

.project-library-meta,
.project-library-card .meta,
.project-library-card [class*="meta"],
.chip-meta{
  font-size:12px !important;
  line-height:1.1 !important;
  max-width:92% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.project-library-card [class*="content"],
.project-library-card [class*="body"],
.project-library-card [class*="info"],
.project-library-card [class*="caption"]{
  bottom:12px !important;
  left:16px !important;
  right:14px !important;
  padding:0 !important;
  max-height:68px !important;
  overflow:hidden !important;
}

.project-library-status,
.project-library-card .status,
.project-library-card [class*="status"]{
  top:12px !important;
  left:14px !important;
  max-width:80% !important;
  height:22px !important;
  padding:0 12px !important;
  font-size:11px !important;
  line-height:22px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.project-library-nav,
.library-arrow,
.rail-arrow{
  width:44px !important;
  height:54px !important;
  border-radius:16px !important;
}

@media (max-width:1280px){
  .project-library-row,
  .project-library-track{
    padding:0 54px 0 !important;
    min-height:144px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:clamp(260px, calc((100% - 36px) / 3), 316px) !important;
    width:clamp(260px, calc((100% - 36px) / 3), 316px) !important;
    max-width:316px !important;
    height:130px !important;
    min-height:130px !important;
    max-height:130px !important;
  }
}

@media (max-width:860px){
  .project-library-row,
  .project-library-track{
    padding:0 4px 8px !important;
    min-height:150px !important;
    max-height:none !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:78vw !important;
    width:78vw !important;
    max-width:none !important;
    height:138px !important;
    min-height:138px !important;
    max-height:138px !important;
  }
}

/*
  HOTFIX v152633
  Дабберская библиотека: увеличиваем превью по ширине и высоте.
  Прошлый фикс сделал карточки слишком плоскими/узкими.
*/
.project-library-shell,
.library-panel,
.projects-library,
.panel:has(.project-library-card){
  padding:26px 30px 30px !important;
}

.project-library-viewport,
.project-library-scroll,
.library-viewport,
.projects-carousel,
.projects-rail,
.projects-strip{
  min-height:205px !important;
  height:auto !important;
  overflow:hidden !important;
}

.project-library-row,
.project-library-track{
  gap:22px !important;
  align-items:center !important;
  padding:6px 64px 8px !important;
  min-height:194px !important;
  max-height:none !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity !important;
}

.project-library-card,
.project-library-card.expanded,
.project-library-card:not(.compact){
  flex:0 0 clamp(360px, 26vw, 430px) !important;
  width:clamp(360px, 26vw, 430px) !important;
  max-width:430px !important;
  height:174px !important;
  min-height:174px !important;
  max-height:174px !important;
  border-radius:22px !important;
  scroll-snap-align:start !important;
}

.project-library-card.compact{
  flex:0 0 clamp(320px, 23vw, 380px) !important;
  width:clamp(320px, 23vw, 380px) !important;
  max-width:380px !important;
  height:154px !important;
  min-height:154px !important;
  max-height:154px !important;
  border-radius:20px !important;
}

.project-library-card [class*="content"],
.project-library-card [class*="body"],
.project-library-card [class*="info"],
.project-library-card [class*="caption"]{
  bottom:16px !important;
  left:20px !important;
  right:18px !important;
  max-height:86px !important;
}

.project-library-title,
.project-library-card .title,
.project-library-card [class*="title"],
.chip-title,
.poster-title{
  font-size:clamp(20px,1.35vw,27px) !important;
  line-height:1.04 !important;
  max-height:58px !important;
  -webkit-line-clamp:2 !important;
}

.project-library-meta,
.project-library-card .meta,
.project-library-card [class*="meta"],
.chip-meta{
  font-size:13px !important;
  line-height:1.15 !important;
}

.project-library-status,
.project-library-card .status,
.project-library-card [class*="status"]{
  top:14px !important;
  left:18px !important;
  height:24px !important;
  line-height:24px !important;
  font-size:12px !important;
  padding:0 13px !important;
}

.project-library-nav,
.library-arrow,
.rail-arrow{
  width:48px !important;
  height:62px !important;
  border-radius:18px !important;
}

@media (max-width:1280px){
  .project-library-row,
  .project-library-track{
    padding:6px 56px 8px !important;
    min-height:178px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:clamp(310px, 31vw, 370px) !important;
    width:clamp(310px, 31vw, 370px) !important;
    max-width:370px !important;
    height:158px !important;
    min-height:158px !important;
    max-height:158px !important;
  }
}

@media (max-width:860px){
  .project-library-row,
  .project-library-track{
    padding:4px 8px 10px !important;
    min-height:172px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:82vw !important;
    width:82vw !important;
    max-width:none !important;
    height:154px !important;
    min-height:154px !important;
    max-height:154px !important;
  }
}

/*
  HOTFIX v152634
  Библиотека проектов ближе к референсу: широкая, не плоская,
  карточки в нормальной пропорции, название в 2 строки, внутренняя тёмная лента.
*/
.project-library-shell,
.library-panel,
.projects-library,
.panel:has(.project-library-card){
  padding:20px 20px 24px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,rgba(18,23,45,.88),rgba(10,17,36,.92)) !important;
}

.project-library-head,
.viewer-section-head,
.section-head:has(+ .project-library-viewport),
.section-head:has(+ .project-library-row){
  margin:0 0 12px !important;
  padding:0 !important;
  min-height:38px !important;
}

.project-library-head h2,
.project-library-head .section-title,
.viewer-section-head h2,
.section-head h2{
  font-size:24px !important;
  line-height:1.05 !important;
  letter-spacing:-.025em !important;
}

.project-library-head p,
.project-library-head .section-subtitle,
.viewer-section-head p,
.section-head p{
  margin-top:5px !important;
  font-size:13px !important;
  line-height:1.25 !important;
  opacity:.78 !important;
}

.project-library-viewport,
.project-library-scroll,
.library-viewport,
.projects-carousel,
.projects-rail,
.projects-strip{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-height:176px !important;
  height:176px !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,rgba(4,10,24,.78),rgba(5,9,23,.92) 50%,rgba(4,10,24,.78)) !important;
}

.project-library-row,
.project-library-track{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:176px !important;
  min-height:176px !important;
  max-height:176px !important;
  padding:14px 58px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity !important;
  scrollbar-width:none !important;
}
.project-library-row::-webkit-scrollbar,
.project-library-track::-webkit-scrollbar{display:none !important}

.project-library-card,
.project-library-card.expanded,
.project-library-card:not(.compact){
  flex:0 0 clamp(300px, calc((100% - 54px) / 4), 352px) !important;
  width:clamp(300px, calc((100% - 54px) / 4), 352px) !important;
  max-width:352px !important;
  height:142px !important;
  min-height:142px !important;
  max-height:142px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  scroll-snap-align:start !important;
  background:linear-gradient(135deg,rgba(31,49,82,.96),rgba(9,17,34,.96)) !important;
  border:1px solid rgba(157,191,255,.18) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}

.project-library-card.compact{
  flex:0 0 clamp(285px, calc((100% - 72px) / 5), 320px) !important;
  width:clamp(285px, calc((100% - 72px) / 5), 320px) !important;
  max-width:320px !important;
  height:132px !important;
  min-height:132px !important;
  max-height:132px !important;
  border-radius:17px !important;
}

.project-library-card img,
.project-library-media img,
.project-library-poster img,
.project-library-card picture,
.project-library-card .cover,
.project-library-card .poster{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
}

.project-library-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,rgba(5,9,20,.28),rgba(5,9,20,.04) 42%,rgba(5,9,20,.30)) !important;
  z-index:1 !important;
}
.project-library-card::after,
.viewer-rail-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  height:76% !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(3,8,20,.38) 45%,rgba(3,8,20,.96) 100%) !important;
  z-index:2 !important;
}

.project-library-card [class*="content"],
.project-library-card [class*="body"],
.project-library-card [class*="info"],
.project-library-card [class*="caption"]{
  position:absolute !important;
  left:16px !important;
  right:14px !important;
  bottom:12px !important;
  z-index:4 !important;
  padding:0 !important;
  max-height:70px !important;
  overflow:hidden !important;
}

.project-library-title,
.project-library-card .title,
.project-library-card [class*="title"],
.chip-title,
.poster-title{
  font-size:clamp(20px,1.18vw,24px) !important;
  line-height:1.03 !important;
  letter-spacing:-.025em !important;
  max-width:96% !important;
  max-height:50px !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  text-wrap:balance !important;
  text-shadow:0 3px 18px rgba(0,0,0,.58) !important;
}

.project-library-meta,
.project-library-card .meta,
.project-library-card [class*="meta"],
.chip-meta{
  margin-top:4px !important;
  font-size:12px !important;
  line-height:1.05 !important;
  max-width:96% !important;
  opacity:.9 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.project-library-status,
.project-library-card .status,
.project-library-card [class*="status"]{
  position:absolute !important;
  top:12px !important;
  left:14px !important;
  z-index:5 !important;
  height:22px !important;
  line-height:22px !important;
  max-width:74% !important;
  padding:0 12px !important;
  font-size:11px !important;
  font-weight:900 !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:rgba(13,26,52,.78) !important;
  border:1px solid rgba(142,194,255,.22) !important;
  backdrop-filter:blur(10px) !important;
}

.project-library-nav,
.library-arrow,
.rail-arrow{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:10 !important;
  width:42px !important;
  height:54px !important;
  border-radius:16px !important;
  background:rgba(5,13,30,.82) !important;
  border:1px solid rgba(139,179,255,.15) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.32) !important;
}

.project-library-card:hover{
  transform:translateY(-2px) scale(1.01) !important;
}

@media (max-width:1280px){
  .project-library-viewport,
  .project-library-scroll,
  .library-viewport,
  .projects-carousel,
  .projects-rail,
  .projects-strip{
    height:168px !important;
    min-height:168px !important;
  }
  .project-library-row,
  .project-library-track{
    height:168px !important;
    min-height:168px !important;
    max-height:168px !important;
    padding:12px 54px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:clamp(280px, calc((100% - 36px) / 3), 330px) !important;
    width:clamp(280px, calc((100% - 36px) / 3), 330px) !important;
    max-width:330px !important;
    height:136px !important;
    min-height:136px !important;
    max-height:136px !important;
  }
}

@media (max-width:860px){
  .project-library-viewport,
  .project-library-scroll,
  .library-viewport,
  .projects-carousel,
  .projects-rail,
  .projects-strip{
    height:166px !important;
    min-height:166px !important;
  }
  .project-library-row,
  .project-library-track{
    height:166px !important;
    min-height:166px !important;
    max-height:166px !important;
    padding:10px 10px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:82vw !important;
    width:82vw !important;
    max-width:none !important;
    height:138px !important;
    min-height:138px !important;
    max-height:138px !important;
  }
}


/*
  HOTFIX v152635
  Нормальная широкая библиотека проектов как в референсе:
  - убираем слишком узкие/тонкие превью;
  - делаем карточки шире и выше;
  - возвращаем читаемое название внизу;
  - оставляем ленту внутри блока без выезда вправо.
*/
:root{
  --app-max-width:1680px !important;
  --wide-page-pad:clamp(18px,2vw,40px) !important;
}

#app{
  width:min(1680px,calc(100vw - var(--wide-page-pad) * 2)) !important;
  max-width:min(1680px,calc(100vw - var(--wide-page-pad) * 2)) !important;
}

.project-library-shell,
.library-panel,
.projects-library,
.panel:has(.project-library-card){
  padding:24px 26px 28px !important;
  border-radius:26px !important;
  overflow:hidden !important;
}

.project-library-viewport,
.project-library-scroll,
.library-viewport,
.projects-carousel,
.projects-rail,
.projects-strip{
  width:100% !important;
  max-width:100% !important;
  height:218px !important;
  min-height:218px !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,rgba(4,10,24,.78),rgba(5,9,23,.94) 50%,rgba(4,10,24,.78)) !important;
}

.project-library-row,
.project-library-track{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  width:100% !important;
  max-width:100% !important;
  height:218px !important;
  min-height:218px !important;
  max-height:218px !important;
  padding:18px 64px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity !important;
  scrollbar-width:none !important;
}
.project-library-row::-webkit-scrollbar,
.project-library-track::-webkit-scrollbar{display:none !important;}

.project-library-card,
.project-library-card.expanded,
.project-library-card:not(.compact){
  flex:0 0 clamp(390px, 25.5vw, 445px) !important;
  width:clamp(390px, 25.5vw, 445px) !important;
  max-width:445px !important;
  height:178px !important;
  min-height:178px !important;
  max-height:178px !important;
  border-radius:20px !important;
  overflow:hidden !important;
  scroll-snap-align:start !important;
  background:linear-gradient(135deg,rgba(31,49,82,.96),rgba(9,17,34,.96)) !important;
  border:1px solid rgba(157,191,255,.20) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.30) !important;
}

.project-library-card.compact{
  flex:0 0 clamp(350px, 22.5vw, 395px) !important;
  width:clamp(350px, 22.5vw, 395px) !important;
  max-width:395px !important;
  height:162px !important;
  min-height:162px !important;
  max-height:162px !important;
  border-radius:19px !important;
}

.project-library-card img,
.project-library-media img,
.project-library-poster img,
.project-library-card picture,
.project-library-card .cover,
.project-library-card .poster{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
}

.project-library-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,rgba(2,7,18,.18),rgba(2,7,18,.02) 48%,rgba(2,7,18,.24)) !important;
}
.project-library-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  height:72% !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(3,8,20,.28) 38%,rgba(3,8,20,.92) 100%) !important;
}

.project-library-card [class*="content"],
.project-library-card [class*="body"],
.project-library-card [class*="info"],
.project-library-card [class*="caption"],
.project-library-card [class*="footer"],
.project-library-card [class*="text"]{
  position:absolute !important;
  left:20px !important;
  right:18px !important;
  bottom:16px !important;
  z-index:4 !important;
  padding:0 !important;
  max-height:86px !important;
  overflow:hidden !important;
}

.project-library-title,
.project-library-card .title,
.project-library-card .project-title,
.project-library-card .card-title,
.project-library-card h3,
.project-library-card h4,
.project-library-card [class*="title"],
.chip-title,
.poster-title{
  color:#f4f8ff !important;
  font-size:clamp(23px,1.45vw,30px) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  max-width:96% !important;
  max-height:64px !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  text-wrap:balance !important;
  text-shadow:0 4px 18px rgba(0,0,0,.70) !important;
}

.project-library-meta,
.project-library-card .meta,
.project-library-card .project-meta,
.project-library-card .card-meta,
.project-library-card [class*="meta"],
.chip-meta{
  color:rgba(235,243,255,.88) !important;
  margin-top:5px !important;
  font-size:13px !important;
  line-height:1.1 !important;
  max-width:96% !important;
  opacity:.94 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:0 2px 10px rgba(0,0,0,.60) !important;
}

.project-library-status,
.project-library-card .status,
.project-library-card .badge,
.project-library-card [class*="status"],
.project-library-card [class*="badge"]{
  position:absolute !important;
  top:14px !important;
  left:18px !important;
  z-index:5 !important;
  height:24px !important;
  line-height:24px !important;
  max-width:76% !important;
  padding:0 13px !important;
  font-size:12px !important;
  font-weight:900 !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:rgba(13,26,52,.78) !important;
  border:1px solid rgba(142,194,255,.22) !important;
  backdrop-filter:blur(10px) !important;
}

.project-library-nav,
.library-arrow,
.rail-arrow{
  width:48px !important;
  height:64px !important;
  border-radius:18px !important;
  z-index:10 !important;
}

@media (max-width:1280px){
  .project-library-viewport,
  .project-library-scroll,
  .library-viewport,
  .projects-carousel,
  .projects-rail,
  .projects-strip{
    height:202px !important;
    min-height:202px !important;
  }
  .project-library-row,
  .project-library-track{
    height:202px !important;
    min-height:202px !important;
    max-height:202px !important;
    padding:16px 58px !important;
    gap:20px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:clamp(350px, 33vw, 405px) !important;
    width:clamp(350px, 33vw, 405px) !important;
    max-width:405px !important;
    height:168px !important;
    min-height:168px !important;
    max-height:168px !important;
  }
}

@media (max-width:860px){
  #app{width:calc(100vw - 24px) !important;}
  .project-library-viewport,
  .project-library-scroll,
  .library-viewport,
  .projects-carousel,
  .projects-rail,
  .projects-strip{
    height:188px !important;
    min-height:188px !important;
  }
  .project-library-row,
  .project-library-track{
    height:188px !important;
    min-height:188px !important;
    max-height:188px !important;
    padding:12px 12px !important;
    gap:16px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:84vw !important;
    width:84vw !important;
    max-width:none !important;
    height:160px !important;
    min-height:160px !important;
    max-height:160px !important;
  }
  .project-library-title,
  .project-library-card .title,
  .project-library-card h3,
  .project-library-card h4,
  .project-library-card [class*="title"]{
    font-size:22px !important;
  }
}

/*
  HOTFIX v152636
  Карточки библиотеки: выше и чуть уже.
  Цель: убрать растянутую "полосу", вернуть кинематографичную пропорцию как в референсе.
*/
.project-library-viewport,
.project-library-scroll,
.library-viewport,
.projects-carousel,
.projects-rail,
.projects-strip{
  height:256px !important;
  min-height:256px !important;
}

.project-library-row,
.project-library-track{
  height:256px !important;
  min-height:256px !important;
  max-height:256px !important;
  gap:20px !important;
  padding:20px 62px !important;
  align-items:center !important;
}

.project-library-card,
.project-library-card.expanded,
.project-library-card:not(.compact){
  flex:0 0 clamp(345px, 22.8vw, 392px) !important;
  width:clamp(345px, 22.8vw, 392px) !important;
  max-width:392px !important;
  height:210px !important;
  min-height:210px !important;
  max-height:210px !important;
  border-radius:22px !important;
}

.project-library-card.compact{
  flex:0 0 clamp(315px, 20.8vw, 360px) !important;
  width:clamp(315px, 20.8vw, 360px) !important;
  max-width:360px !important;
  height:190px !important;
  min-height:190px !important;
  max-height:190px !important;
  border-radius:21px !important;
}

.project-library-card img,
.project-library-media img,
.project-library-poster img,
.project-library-card picture,
.project-library-card .cover,
.project-library-card .poster{
  object-position:center center !important;
}

.project-library-card::after{
  height:68% !important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(3,8,20,.24) 34%,rgba(3,8,20,.94) 100%) !important;
}

.project-library-card [class*="content"],
.project-library-card [class*="body"],
.project-library-card [class*="info"],
.project-library-card [class*="caption"],
.project-library-card [class*="footer"],
.project-library-card [class*="text"]{
  left:18px !important;
  right:16px !important;
  bottom:17px !important;
  max-height:92px !important;
}

.project-library-title,
.project-library-card .title,
.project-library-card .project-title,
.project-library-card .card-title,
.project-library-card h3,
.project-library-card h4,
.project-library-card [class*="title"],
.chip-title,
.poster-title{
  font-size:clamp(22px,1.32vw,27px) !important;
  line-height:1.04 !important;
  max-height:58px !important;
  -webkit-line-clamp:2 !important;
}

.project-library-meta,
.project-library-card .meta,
.project-library-card .project-meta,
.project-library-card .card-meta,
.project-library-card [class*="meta"],
.chip-meta{
  font-size:13px !important;
  margin-top:6px !important;
}

.project-library-nav,
.library-arrow,
.rail-arrow{
  height:66px !important;
}

@media (max-width:1280px){
  .project-library-viewport,
  .project-library-scroll,
  .library-viewport,
  .projects-carousel,
  .projects-rail,
  .projects-strip{
    height:232px !important;
    min-height:232px !important;
  }
  .project-library-row,
  .project-library-track{
    height:232px !important;
    min-height:232px !important;
    max-height:232px !important;
    padding:18px 56px !important;
    gap:18px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:clamp(320px, 30vw, 365px) !important;
    width:clamp(320px, 30vw, 365px) !important;
    max-width:365px !important;
    height:196px !important;
    min-height:196px !important;
    max-height:196px !important;
  }
}

@media (max-width:860px){
  .project-library-viewport,
  .project-library-scroll,
  .library-viewport,
  .projects-carousel,
  .projects-rail,
  .projects-strip{
    height:218px !important;
    min-height:218px !important;
  }
  .project-library-row,
  .project-library-track{
    height:218px !important;
    min-height:218px !important;
    max-height:218px !important;
    padding:12px 12px !important;
    gap:16px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    flex-basis:80vw !important;
    width:80vw !important;
    max-width:none !important;
    height:188px !important;
    min-height:188px !important;
    max-height:188px !important;
  }
}

/*
  HOTFIX v152637
  Библиотека проектов: карточки ещё чуть выше, а затемнение снизу мягче.
  Цель: картинка видна лучше, но текст внизу остаётся читаемым.
*/
.project-library-viewport,
.project-library-scroll,
.library-viewport,
.projects-carousel,
.projects-rail,
.projects-strip{
  height:278px !important;
  min-height:278px !important;
}

.project-library-row,
.project-library-track{
  height:278px !important;
  min-height:278px !important;
  max-height:278px !important;
  padding:20px 62px !important;
  gap:20px !important;
  align-items:center !important;
}

.project-library-card,
.project-library-card.expanded,
.project-library-card:not(.compact){
  height:232px !important;
  min-height:232px !important;
  max-height:232px !important;
}

.project-library-card.compact{
  height:210px !important;
  min-height:210px !important;
  max-height:210px !important;
}

.project-library-card::before{
  background:linear-gradient(90deg,rgba(2,7,18,.12),rgba(2,7,18,0) 48%,rgba(2,7,18,.16)) !important;
}

.project-library-card::after{
  height:58% !important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(3,8,20,.10) 34%,rgba(3,8,20,.68) 100%) !important;
}

.project-library-title,
.project-library-card .title,
.project-library-card .project-title,
.project-library-card .card-title,
.project-library-card h3,
.project-library-card h4,
.project-library-card [class*="title"],
.chip-title,
.poster-title{
  text-shadow:0 3px 14px rgba(0,0,0,.72) !important;
}

.project-library-meta,
.project-library-card .meta,
.project-library-card .project-meta,
.project-library-card .card-meta,
.project-library-card [class*="meta"],
.chip-meta{
  text-shadow:0 2px 10px rgba(0,0,0,.62) !important;
}

@media (max-width:1280px){
  .project-library-viewport,
  .project-library-scroll,
  .library-viewport,
  .projects-carousel,
  .projects-rail,
  .projects-strip{
    height:252px !important;
    min-height:252px !important;
  }
  .project-library-row,
  .project-library-track{
    height:252px !important;
    min-height:252px !important;
    max-height:252px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    height:214px !important;
    min-height:214px !important;
    max-height:214px !important;
  }
}

@media (max-width:860px){
  .project-library-viewport,
  .project-library-scroll,
  .library-viewport,
  .projects-carousel,
  .projects-rail,
  .projects-strip{
    height:236px !important;
    min-height:236px !important;
  }
  .project-library-row,
  .project-library-track{
    height:236px !important;
    min-height:236px !important;
    max-height:236px !important;
  }
  .project-library-card,
  .project-library-card.expanded,
  .project-library-card:not(.compact){
    height:202px !important;
    min-height:202px !important;
    max-height:202px !important;
  }
}