/* ══════════════════════════════════════════════════════════
   LF CUSTOM PLAYER SKIN — wraps cdnvideohub <video-player>
   Adapted from provided design mock, theme-aware colors.
   ══════════════════════════════════════════════════════════ */

.lf-player{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:var(--radius);background:#080a09;color:#fff;user-select:none;box-shadow:0 8px 48px rgba(0,0,0,.2);isolation:isolate;z-index:0;
  /* Theme-aware accent — follows site light/dark primary color */
  --lf-accent: var(--primary);
  --lf-accent-soft: color-mix(in srgb, var(--primary) 70%, transparent);
}

/* The cdnvideohub component fills the box; its own native controls
   stay underneath our skin. We try to dim/disable pointer events on it
   so our overlay controls take over visually, but it remains the actual
   video engine (audio/video/ads run through it). */
.lf-player video-player{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;}

/* Attempt to hide the native UI chrome if the component exposes ::part()
   hooks (no guarantee — depends on their shadow DOM). Harmless if unsupported. */
.lf-player video-player::part(controls),
.lf-player video-player::part(control-bar),
.lf-player video-player::part(controlbar),
.lf-player video-player::part(bottom-bar),
.lf-player video-player::part(progress),
.lf-player video-player::part(progress-bar),
.lf-player video-player::part(ui),
.lf-player video-player::part(overlay),
.lf-player video-player::part(toolbar),
.lf-player video-player::part(menu){opacity:0!important;pointer-events:none!important;}

.lf-gradient{position:absolute;left:0;right:0;pointer-events:none;z-index:2147483600}
.lf-gradient-top{top:0;height:34%;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.32),transparent)}
.lf-gradient-bottom{bottom:0;height:52%;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.34),transparent)}

.lf-top,.lf-bottom,.lf-center-play,.lf-intro,.lf-ended,.lf-resume,.lf-float-menu,.lf-settings{
  position:absolute;
  z-index:2147483647;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
  isolation:isolate;
}
.lf-top{top:18px;left:18px;right:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-width:0;overflow:visible;}
.lf-head-info{min-width:0;flex:1 1 auto;max-width:calc(100% - 520px);}
.lf-title{font-size:24px;font-weight:850;letter-spacing:-.7px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lf-info{margin-top:6px;font-size:13px;font-weight:650;color:rgba(255,255,255,.68);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lf-selects{flex:0 1 520px;min-width:0;display:grid;grid-template-columns:minmax(104px,130px) minmax(104px,130px) minmax(140px,260px);gap:8px;justify-content:end;}

.lf-player button{border:0;border-radius:6px;color:#fff;cursor:pointer;background:none;font-family:inherit;}
.lf-player input{font:inherit;}
.lf-menu-btn{width:100%;min-width:0;max-width:100%;overflow:hidden;height:38px;padding:0 14px;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.15);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:13px;font-weight:800;white-space:nowrap;}
.lf-menu-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lf-menu-btn svg{width:15px;height:15px;fill:currentColor;opacity:.8;flex-shrink:0;}
.lf-menu-btn.active{background:var(--lf-accent, rgba(90,138,106,.82));}
.lf-menu-btn:hover{background:rgba(255,255,255,.22);}

.lf-center-play{width:76px;height:76px;left:50%;top:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:linear-gradient(135deg,var(--lf-accent-soft,rgba(90,138,106,.92)),rgba(22,28,24,.78));box-shadow:0 18px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.lf-center-play::before{content:"";position:absolute;inset:8px;border-radius:6px;background:rgba(255,255,255,.08);pointer-events:none;}
.lf-center-play svg{width:39px;height:39px;fill:#fff;transform:translateX(-3px);position:relative;z-index:1;}

.lf-bottom{left:18px;right:18px;bottom:14px}
.lf-progress{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;gap:12px;font-size:12px;font-weight:750;color:rgba(255,255,255,.78)}
.lf-progress input{width:100%;height:4px;accent-color:var(--lf-accent,#5a8a6a);cursor:pointer}
.lf-controls{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lf-controls-left,.lf-controls-right{display:flex;align-items:center;gap:8px}
.lf-icon-btn{height:42px;min-width:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.15);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:13px;font-weight:800}
.lf-icon-btn:hover{background:rgba(255,255,255,.22);}
.lf-icon-btn svg{width:21px;height:21px;fill:#fff}
.lf-volume{display:flex;align-items:center;gap:8px}
.lf-volume input{width:92px;accent-color:#fff}
.lf-time-text{min-width:96px;font-size:13px;font-weight:800;color:rgba(255,255,255,.82)}

.lf-float-menu{top:66px;width:250px;max-height:320px;padding:8px;display:none;border-radius:6px;background:rgba(16,18,17,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden}
.lf-float-menu.active{display:block}
.lf-float-search{width:100%;height:40px;border:0;outline:0;margin-bottom:6px;padding:0 12px;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;font-size:14px;font-weight:700}
.lf-float-search::placeholder{color:rgba(255,255,255,.52)}
.lf-float-list{max-height:256px;overflow:auto;padding-right:2px}
.lf-float-list::-webkit-scrollbar,.lf-panel-body::-webkit-scrollbar{width:4px}
.lf-float-list::-webkit-scrollbar-thumb,.lf-panel-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
.lf-list-item{width:100%;height:40px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;background:transparent;color:#fff;font-size:14px;font-weight:750}
.lf-list-item:hover{background:rgba(255,255,255,.1);}
.lf-list-item.active{background:var(--lf-accent,#5a8a6a)}
.lf-list-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-check{width:18px;height:18px;fill:#fff;flex:0 0 auto}

.lf-settings{right:18px;bottom:78px;width:330px;display:none;border-radius:6px;background:rgba(18,20,19,.9);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);overflow:hidden}
.lf-settings.active{display:block}
.lf-panel-head{height:58px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}
.lf-panel-title{font-size:19px;font-weight:850;letter-spacing:-.4px}
.lf-panel-close,.lf-panel-back{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.12);border-radius:6px}
.lf-panel-close:hover,.lf-panel-back:hover{background:rgba(255,255,255,.2);}
.lf-panel-close svg,.lf-panel-back svg{width:22px;height:22px;fill:#fff}
.lf-panel-body{max-height:360px;overflow:auto;padding:8px}
.lf-settings-row{width:100%;min-height:58px;padding:10px 10px;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;border-radius:6px;background:transparent;text-align:left}
.lf-settings-row svg{width:24px;height:24px;fill:#fff;opacity:.92}
.lf-settings-row-title{font-size:14px;font-weight:850}
.lf-settings-row-desc{margin-top:3px;font-size:12px;font-weight:650;color:rgba(255,255,255,.55)}
.lf-settings-value{font-size:13px;font-weight:800;color:rgba(255,255,255,.72);white-space:nowrap}
.lf-settings-row.active,.lf-settings-row:hover{background:rgba(255,255,255,.1)}
.lf-toggle{width:42px;height:24px;position:relative;background:rgba(255,255,255,.18)}
.lf-toggle::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s}
.lf-toggle.on{background:var(--lf-accent,#5a8a6a)}
.lf-toggle.on::after{left:22px}
.lf-option-list .lf-list-item{height:48px;font-size:16px}
.lf-option-list .lf-list-item.active{background:var(--lf-accent-soft,rgba(90,138,106,.18));color:#fff}
.lf-badge{font-size:10px;font-weight:900;color:#6ec2ff;margin-left:4px}

.lf-intro{inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:#f7f8f6}
.lf-intro.active{display:flex;animation:lfIntroFade .95s ease forwards}
.lf-intro-logo{width:min(420px,78vw);animation:lfLogoPop .95s cubic-bezier(.2,.9,.2,1) forwards}
.lf-intro-logo svg{width:100%;height:auto;display:block}
@keyframes lfLogoPop{0%{opacity:0;transform:scale(.86) translateY(14px)}35%{opacity:1;transform:scale(1) translateY(0)}72%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(1.06) translateY(-8px)}}
@keyframes lfIntroFade{0%,72%{opacity:1}100%{opacity:0;pointer-events:none}}

.lf-resume{left:18px;bottom:88px;display:none;align-items:center;gap:10px;padding:10px;border-radius:6px;background:rgba(16,18,17,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.lf-resume.active{display:flex}
.lf-resume-text{font-size:13px;font-weight:750;color:rgba(255,255,255,.78)}
.lf-resume-btn{height:34px;padding:0 12px;background:var(--lf-accent,#5a8a6a);font-size:13px;font-weight:850}
.lf-ended{inset:0;z-index:25;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lf-ended.active{display:flex}
.lf-ended-card{width:min(360px,90%);padding:22px;border-radius:6px;background:rgba(255,255,255,.12);text-align:center}
.lf-ended-title{font-size:22px;font-weight:850}
.lf-ended-subtitle{margin-top:8px;font-size:14px;color:rgba(255,255,255,.68)}
.lf-next-big{margin-top:18px;height:44px;padding:0 18px;background:var(--lf-accent,#5a8a6a);font-size:14px;font-weight:850}

.lf-episode-nav{width:100%;margin:14px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lf-episode-btn{height:48px;border:0;border-radius:var(--radius);background:var(--bg-hover);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:850;cursor:pointer;}
.lf-episode-btn:hover{background:var(--bg-card);}
.lf-episode-btn-next{background:var(--primary);color:var(--primary-text);}
.lf-episode-btn-next:hover{background:var(--primary-h);}
.lf-episode-btn svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto;}
.lf-episode-btn:disabled{opacity:.38;cursor:default;}

@media(max-width:900px){
  .lf-top{left:12px;right:12px;top:12px;display:grid;grid-template-columns:1fr;gap:10px}
  .lf-head-info{max-width:100%;}
  .lf-selects{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);flex:none}
  .lf-menu-btn{height:34px;padding:0 10px;font-size:12px}
  .lf-float-menu{top:88px!important;left:12px!important;right:12px!important;width:auto!important}
}
@media(max-width:520px){
  .lf-selects{grid-template-columns:1fr 1fr}
  .lf-selects .lf-menu-btn:nth-child(3){grid-column:1/-1}
  .lf-title{font-size:18px}
  .lf-info{font-size:11px}
  .lf-episode-nav{grid-template-columns:1fr;margin:10px 0 0;}
  .lf-episode-btn{height:44px;font-size:13px}
  .lf-bottom{left:10px;right:10px}
  .lf-controls{gap:8px}
  .lf-time-text{display:none}
  .lf-icon-btn span,.lf-volume{display:none}
  .lf-icon-btn{width:40px;height:40px;min-width:40px;padding:0}
  .lf-progress{grid-template-columns:40px 1fr 40px}
  .lf-resume{left:12px;right:12px;bottom:82px}
  .lf-settings{left:12px;right:12px;bottom:64px;width:auto}
}