.syt-shell{
  --syt-gap:14px;
  --syt-ratio:56.25%;
  --syt-thumb-width:240px;
  --syt-list-panel-width:340px;
  --syt-list-gap:10px;
  --syt-transition:.2s;
  --syt-thumb-overlay-idle:rgba(15,23,42,0);
  --syt-thumb-overlay-active:rgba(14,165,164,.24);
  --syt-list-columns-desktop:1;
  --syt-np-title-lines:2;
  --syt-np-desc-lines:2;
  background:#0f0f0f;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--syt-gap);
  width:100%;
  color:#f4f4f5;
}

.syt-toolbar{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.syt-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.syt-chip{
  border:1px solid rgba(255,255,255,.16);
  background:#111827;
  color:#f8fafc;
  border-radius:999px;
  font-size:.82rem;
  line-height:1;
  padding:8px 12px;
  cursor:pointer;
}
.syt-chip.is-active{
  border-color:#3b82f6;
  background:#1d4ed8;
}

.syt-search-wrap{margin-left:auto}
.syt-search{
  width:min(320px, 100%);
  border:1px solid rgba(255,255,255,.16);
  background:#111827;
  color:#fff;
  border-radius:10px;
  padding:9px 12px;
}

.syt-main{display:flex;flex-direction:column;gap:10px;max-width:100%}
.syt-main-size{width:100%;max-width:100%}

.syt-player{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#09090b;
}

.syt-player::before{
  content:"";
  display:block;
  padding-top:var(--syt-ratio);
}

.syt-preview,
.syt-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.syt-preview{
  border:0;
  background:#09090b;
  cursor:pointer;
  padding:0;
}

.syt-preview-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.syt-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.3) 100%);
}

.syt-play-icon{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(15,23,42,.75);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  z-index:2;
}

.syt-iframe{border:0;display:none}
.syt-shell.is-loaded .syt-preview{display:none}
.syt-shell.is-loaded .syt-iframe{display:block}

.syt-main-meta{display:flex;flex-direction:column;gap:4px}
.syt-main-title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.3;color:#fafafa}
.syt-main-caption{margin:0;font-size:.92rem;opacity:.82;color:#d4d4d8}

.syt-now-playing{
  margin-top:10px;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:12px;
}

.syt-now-playing .syt-main-title,
.syt-now-playing .syt-main-caption{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.syt-now-playing .syt-main-title{-webkit-line-clamp:var(--syt-np-title-lines)}
.syt-now-playing .syt-main-caption{-webkit-line-clamp:var(--syt-np-desc-lines)}
.syt-shell.np-expanded .syt-now-playing .syt-main-title,
.syt-shell.np-expanded .syt-now-playing .syt-main-caption{
  -webkit-line-clamp:unset;
  overflow:visible;
}

.syt-more-btn{
  margin-top:8px;
  border:0;
  background:transparent;
  color:#93c5fd;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  padding:0;
}

.syt-list-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}

.syt-list{
  display:flex;
  flex-direction:column;
  gap:var(--syt-list-gap);
  width:100%;
  overflow-x:auto;
  overflow-y:auto;
  max-height:100%;
}

.syt-item{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:#18181b;
  padding:8px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-align:left;
  transition:all var(--syt-transition) ease;
}

.syt-item:hover{transform:translateY(-1px)}
.syt-item.is-active{
  border-color:#3b82f6;
  box-shadow:0 10px 24px rgba(59,130,246,.24);
}
.syt-item.is-hidden{display:none !important}

.syt-thumb{
  width:120px;
  min-width:120px;
  aspect-ratio:16/9;
  border-radius:8px;
  overflow:hidden;
  background:#09090b;
  position:relative;
}
.syt-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--syt-thumb-overlay-idle);
  transition:background var(--syt-transition) ease;
}
.syt-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.syt-item.is-active .syt-thumb::after{
  background:var(--syt-thumb-overlay-active);
}

.syt-item-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.syt-item-title{font-size:.95rem;font-weight:700;line-height:1.25;color:#fafafa}
.syt-item-caption{
  font-size:.84rem;opacity:.9;line-height:1.35;color:#cbd5e1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.syt-shell.is-carousel_strip .syt-list{
  flex-direction:row;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  padding-bottom:2px;
}

.syt-shell.is-carousel_strip .syt-item{
  width:var(--syt-thumb-width);
  min-width:var(--syt-thumb-width);
  scroll-snap-align:start;
  flex-direction:column;
  align-items:flex-start;
}

.syt-shell.is-carousel_strip .syt-thumb{
  width:100%;
  min-width:0;
}

.syt-nav{
  border:1px solid rgba(255,255,255,.14);
  background:#111827;
  color:#f9fafb;
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.syt-shell.is-master_playlist .syt-nav{display:none}

.syt-shell.is-loaded .syt-item.is-active.is-playing .syt-thumb::after{
  background:var(--syt-thumb-overlay-active);
}

.syt-shell.hide-active-copy.is-loaded .syt-item.is-active.is-playing .syt-item-copy{display:none}
.syt-shell.hide-single-main-meta .syt-main-meta{display:none}

.syt-shell.is-loaded .syt-item.is-active.is-playing{
  align-items:center;
}

.syt-shell.is-loaded .syt-item.is-active.is-playing .syt-thumb{
  width:100%;
  min-width:0;
}

.syt-shell.has-list.layout-desktop-right{
  grid-template-columns:minmax(0,1fr) minmax(240px, var(--syt-list-panel-width));
}
.syt-shell.has-list.layout-desktop-left{
  grid-template-columns:minmax(240px, var(--syt-list-panel-width)) minmax(0,1fr);
}
.syt-shell.has-list.layout-desktop-left .syt-main{order:2}
.syt-shell.has-list.layout-desktop-left .syt-list-wrap{order:1}
.syt-shell.has-list.layout-desktop-right .syt-main{order:1}
.syt-shell.has-list.layout-desktop-right .syt-list-wrap{order:2}
.syt-shell.has-list.layout-desktop-left .syt-list,
.syt-shell.has-list.layout-desktop-right .syt-list{
  display:grid;
  grid-template-columns:repeat(var(--syt-list-columns-desktop), minmax(0,1fr));
  overflow-x:hidden;
  overflow-y:auto;
}
.syt-shell.has-list.layout-desktop-bottom{
  grid-template-columns:minmax(0,1fr);
}
.syt-shell.has-list.layout-desktop-bottom .syt-list{
  flex-direction:row;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
}
.syt-shell.has-list.layout-desktop-bottom .syt-item{
  width:var(--syt-thumb-width);
  min-width:var(--syt-thumb-width);
  scroll-snap-align:start;
  flex-direction:column;
  align-items:flex-start;
}
.syt-shell.has-list.layout-desktop-bottom .syt-thumb{
  width:100%;
  min-width:0;
}
.syt-shell.has-list.layout-desktop-hidden .syt-list-wrap,
.syt-shell.no-list .syt-list-wrap{
  display:none;
}
.syt-empty{
  border:1px dashed rgba(255,255,255,.22);
  border-radius:10px;
  padding:12px;
  font-size:.9rem;
  color:#e5e7eb;
  background:#0b1020;
}

@media (max-width:767px){
  .syt-shell{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .syt-search-wrap{margin-left:0;width:100%}
  .syt-search{width:100%}
  .syt-thumb{width:104px;min-width:104px}

  .syt-shell.layout-mobile-hidden .syt-list-wrap{display:none}
  .syt-shell.layout-mobile-top .syt-list-wrap{order:-1}

  .syt-shell.layout-mobile-bottom .syt-list,
  .syt-shell.layout-mobile-top .syt-list{
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
  }

  .syt-shell.layout-mobile-bottom .syt-item,
  .syt-shell.layout-mobile-top .syt-item,
  .syt-shell.is-carousel_strip .syt-item{
    width:min(76vw, var(--syt-thumb-width));
    min-width:min(76vw, var(--syt-thumb-width));
    flex-direction:column;
    align-items:flex-start;
    scroll-snap-align:start;
  }

  .syt-shell.layout-mobile-bottom .syt-thumb,
  .syt-shell.layout-mobile-top .syt-thumb,
  .syt-shell.is-carousel_strip .syt-thumb{
    width:100%;
    min-width:0;
  }

  .syt-shell.layout-mobile-left,
  .syt-shell.layout-mobile-right{
    grid-template-columns:minmax(0,1fr) minmax(130px, 38%);
  }
  .syt-shell.layout-mobile-left .syt-main{order:2}
  .syt-shell.layout-mobile-left .syt-list-wrap{order:1}
  .syt-shell.layout-mobile-right .syt-main{order:1}
  .syt-shell.layout-mobile-right .syt-list-wrap{order:2}
  .syt-shell.layout-mobile-left .syt-list,
  .syt-shell.layout-mobile-right .syt-list{
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    max-height:60vh;
  }
  .syt-shell.layout-mobile-left .syt-item,
  .syt-shell.layout-mobile-right .syt-item{
    width:100%;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
  }
  .syt-shell.layout-mobile-left .syt-thumb,
  .syt-shell.layout-mobile-right .syt-thumb{
    width:100%;
    min-width:0;
  }
}