.lvp-open { overflow: hidden !important; }
.lvp-overlay{
  position:fixed; inset:0; z-index:21500; display:none;
  background:radial-gradient(circle at top, rgba(20,24,34,.82), rgba(0,0,0,.96));
}
.lvp-overlay.open{ display:block; }
.lvp-shell{ position:absolute; inset:0; color:#eef3ff; }
.lvp-close{
  position:absolute; top:12px; right:12px; z-index:4; width:40px; height:40px;
  border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(12,16,24,.86); color:#fff; cursor:pointer;
}
.lvp-grid{ display:grid; grid-template-columns: minmax(220px, 340px) 1fr; gap:12px; height:100%; padding:12px 12px 18px; box-sizing:border-box; }
.lvp-recommendations{
  border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(8,12,20,.62);
  overflow:hidden; display:flex; flex-direction:column;
}
.lvp-rec-head{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); font-size:12px; opacity:.88; text-transform:uppercase; letter-spacing:.06em; }
.lvp-rec-list{ overflow:auto; display:flex; flex-direction:column; gap:2px; padding:6px; }
.lvp-rec-item{
  text-align:left; border:0; background:transparent; color:#d8e7ff; border-radius:10px; padding:10px; cursor:pointer;
  display:flex; flex-direction:column; gap:4px;
}
.lvp-rec-item.active, .lvp-rec-item:hover{ background:rgba(62,102,166,.28); }
.lvp-rec-title{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvp-rec-author{ font-size:11px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvp-main{ display:flex; flex-direction:column; min-width:0; height:100%; }
.lvp-video-host{
  flex:1 1 auto; min-height:240px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); background:#000;
  display:flex; align-items:center; justify-content:center;
}
.lvp-video{ width:100%; height:100%; object-fit:contain; background:#000; }
.lvp-progress{ height:3px; background:rgba(255,255,255,.12); margin-top:8px; border-radius:999px; overflow:hidden; }
.lvp-progress-fill{ display:block; width:0%; height:100%; background:#5ba9ff; transition:width .15s linear; }
.lvp-meta{ margin-top:8px; }
.lvp-title{ margin:0 0 6px; font-size:18px; line-height:1.25; }
.lvp-author{ font-size:12px; opacity:.8; margin-bottom:6px; }
.lvp-desc{ margin:0; max-width:80ch; font-size:13px; opacity:.9; max-height:70px; overflow:auto; }
.lvp-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.lvp-action{
  border:1px solid rgba(255,255,255,.2); background:rgba(11,15,23,.7); color:#ecf2ff;
  border-radius:999px; padding:8px 12px; cursor:pointer; font-size:12px;
}
.lvp-mobile-meta{ display:none; }
@media (max-width: 767px){
  .lvp-grid{ display:block; padding:0; }
  .lvp-recommendations{ display:none; }
  .lvp-main{ height:100%; }
  .lvp-video-host{ border:none; border-radius:0; min-height:100%; }
  .lvp-meta, .lvp-actions{ display:none; }
  .lvp-progress{ position:absolute; left:8px; right:8px; bottom:8px; z-index:5; }
  .lvp-mobile-meta{
    display:block; position:absolute; left:0; right:0; bottom:20px; z-index:4;
    padding:18px 12px 30px;
    background:linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,0));
  }
  .lvp-mobile-author{ font-size:12px; opacity:.85; margin-bottom:4px; }
  .lvp-mobile-title{ font-size:15px; font-weight:600; margin-bottom:4px; }
  .lvp-mobile-desc{ font-size:12px; opacity:.88; max-height:36px; overflow:hidden; }
  .lvp-shell.ui-hidden .lvp-close,
  .lvp-shell.ui-hidden .lvp-mobile-meta,
  .lvp-shell.ui-hidden .lvp-progress{ opacity:0; pointer-events:none; transition:opacity .2s ease; }
}