/* ============================================================
   KOSOVA TV V3241.4 — SAFE UI RESTORE + PRO POLISH
   CSS ONLY. No DOM moving. No playback changes.
   ============================================================ */

:root{
  --p-bg:#05080d;
  --p-panel:#0b1119;
  --p-panel2:#0f1722;
  --p-line:rgba(255,255,255,.08);
  --p-line2:rgba(255,255,255,.13);
  --p-text:#f6f8fb;
  --p-muted:#929eac;
  --p-red:#ff2448;
  --p-red2:#d91438;
}

html,body{background:var(--p-bg)}

/* ===== PLAYER SHELL ===== */
#live{
  background:rgba(2,5,9,.95)!important;
}

#live .player-shell{
  width:min(1540px,calc(100vw - 24px))!important;
  height:min(900px,calc(100vh - 24px))!important;
  border-radius:22px!important;
  border:1px solid var(--p-line2)!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#070b11,#05080d)!important;
  box-shadow:0 30px 110px rgba(0,0,0,.55)!important;
}

#live .player-top,#live .player-header{
  min-height:62px!important;
  background:#080d14!important;
  border-bottom:1px solid var(--p-line)!important;
}

#live .video-wrap{background:#000!important}
#live video{background:#000!important}

/* ===== DRAWER ===== */
#live .player-drawer{
  width:395px!important;
  min-width:395px!important;
  max-width:395px!important;
  background:linear-gradient(180deg,#0d141d,#091019)!important;
  border-left:1px solid var(--p-line)!important;
  box-shadow:-16px 0 48px rgba(0,0,0,.22)!important;
}

.ktv-v3239-drawer-head,
.ktv-v3241-drawer-head{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  padding:14px 12px 11px!important;
  background:rgba(10,15,22,.98)!important;
  border-bottom:1px solid var(--p-line)!important;
}

.ktv-v3239-drawer-title b,
.ktv-v3241-drawer-title b{
  font-size:16px!important;
  color:#fff!important;
}

.ktv-v3239-drawer-title small,
.ktv-v3241-drawer-title small{
  color:var(--p-muted)!important;
  font-size:10px!important;
}

#drawerSearch{
  width:100%!important;
  height:42px!important;
  border-radius:12px!important;
  border:1px solid var(--p-line2)!important;
  background:#101824!important;
  color:#fff!important;
  font-size:12px!important;
  outline:none!important;
}

#drawerSearch:focus{
  border-color:rgba(255,36,72,.58)!important;
  box-shadow:0 0 0 3px rgba(255,36,72,.10)!important;
}

.ktv-v3239-cats,.ktv-v3241-cats{
  display:flex!important;
  gap:7px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
  padding:2px 0!important;
}
.ktv-v3239-cats::-webkit-scrollbar,.ktv-v3241-cats::-webkit-scrollbar{display:none!important}

.ktv-v3239-cat,.ktv-v3241-cat{
  flex:0 0 auto!important;
  height:31px!important;
  padding:0 11px!important;
  border-radius:999px!important;
  border:1px solid var(--p-line)!important;
  background:#111a25!important;
  color:#a8b3bf!important;
  font-size:9px!important;
  font-weight:800!important;
}

.ktv-v3239-cat.active,.ktv-v3241-cat.active{
  background:linear-gradient(135deg,var(--p-red),var(--p-red2))!important;
  color:#fff!important;
  border-color:transparent!important;
}

#drawerList{
  background:linear-gradient(180deg,#0b121b,#091019)!important;
  padding:9px 9px 16px!important;
  overflow-y:auto!important;
}

#drawerList .drawer-channel{
  min-height:62px!important;
  grid-template-columns:44px minmax(0,1fr) auto!important;
  gap:10px!important;
  padding:8px 9px!important;
  margin-bottom:7px!important;
  border-radius:14px!important;
  border:1px solid transparent!important;
  background:#111a25!important;
  color:#fff!important;
}

#drawerList .drawer-channel:hover{
  background:#15202d!important;
  border-color:var(--p-line2)!important;
}

#drawerList .drawer-channel.active{
  background:linear-gradient(90deg,rgba(255,36,72,.17),#121b27 72%)!important;
  border-color:rgba(255,36,72,.52)!important;
  box-shadow:inset 3px 0 0 var(--p-red)!important;
}

#drawerList .drawer-channel img,#drawerList .drawer-fallback{
  width:44px!important;
  height:44px!important;
  border-radius:10px!important;
  background:#eef1f5!important;
}

#drawerList .drawer-channel b{font-size:12px!important}
#drawerList .drawer-channel small{font-size:9px!important;color:#8f9aaa!important}
#drawerList .drawer-channel em{
  min-width:38px!important;
  height:22px!important;
  border-radius:999px!important;
  font-size:8px!important;
}

/* CURRENT CHANNEL CARD from V3241.2 if present */
.ktv-v32412-current,
.ktv-current-channel,
.current-channel-card{
  border-radius:15px!important;
  border:1px solid rgba(255,36,72,.28)!important;
  background:linear-gradient(90deg,rgba(255,36,72,.14),#101823 72%)!important;
}

/* ===== NOW PLAYING BAR ===== */
.ktv-v3239-nowbar,.ktv-v3241-nowbar{
  padding:12px 14px!important;
  background:#09111a!important;
  border-top:1px solid var(--p-line)!important;
}

.ktv-v3239-action,.ktv-v3241-action{
  min-height:38px!important;
  border-radius:11px!important;
  border:1px solid var(--p-line2)!important;
  background:rgba(255,255,255,.04)!important;
}

/* ===== TABLET ===== */
@media (max-width:1180px){
  #live .player-shell{
    width:calc(100vw - 14px)!important;
    height:calc(100vh - 14px)!important;
    border-radius:18px!important;
  }
  #live .player-drawer{
    width:350px!important;
    min-width:350px!important;
    max-width:350px!important;
  }
}

/* ===== MOBILE ===== */
@media (max-width:760px){
  #live{padding:0!important;background:#02050a!important}

  #live .player-shell{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    border-radius:0!important;
    border:0!important;
    box-shadow:none!important;
  }

  #live .player-top,#live .player-header{
    min-height:56px!important;
    padding:0 10px!important;
  }

  #live .video-wrap{
    background:#000!important;
    flex:0 0 auto!important;
  }

  #live video,#live .video-wrap video{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    max-height:32dvh!important;
    object-fit:contain!important;
    background:#000!important;
  }

  #live .player-drawer{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:78dvh!important;
    border-left:0!important;
    border-top:1px solid var(--p-line2)!important;
    border-radius:22px 22px 0 0!important;
    background:linear-gradient(180deg,#0b121b,#091019)!important;
    box-shadow:0 -24px 80px rgba(0,0,0,.56)!important;
    transform:translateY(104%)!important;
    z-index:55!important;
    overflow:hidden!important;
  }

  #live.drawer-open .player-drawer{transform:translateY(0)!important}

  #live .player-drawer:before{
    content:""!important;
    display:block!important;
    width:44px!important;
    height:4px!important;
    margin:8px auto 2px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.23)!important;
  }

  .ktv-v3239-drawer-head,.ktv-v3241-drawer-head{
    padding:8px 11px 10px!important;
  }

  #drawerSearch{height:41px!important;font-size:12px!important}

  .ktv-v3239-cat,.ktv-v3241-cat{
    height:30px!important;
    padding:0 10px!important;
    font-size:8px!important;
  }

  #drawerList{
    padding:8px 8px calc(18px + env(safe-area-inset-bottom))!important;
    overscroll-behavior:contain!important;
  }

  #drawerList .drawer-channel{
    min-height:58px!important;
    grid-template-columns:40px minmax(0,1fr) auto!important;
    gap:9px!important;
    padding:7px 8px!important;
    border-radius:13px!important;
  }

  #drawerList .drawer-channel img,#drawerList .drawer-fallback{
    width:40px!important;
    height:40px!important;
    border-radius:9px!important;
  }

  .ktv-v3239-nowbar,.ktv-v3241-nowbar{
    padding:10px 10px calc(10px + env(safe-area-inset-bottom))!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    background:rgba(7,12,18,.98)!important;
  }

  .ktv-v3239-nowactions,.ktv-v3241-nowactions{
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none!important;
  }
  .ktv-v3239-nowactions::-webkit-scrollbar,.ktv-v3241-nowactions::-webkit-scrollbar{display:none!important}

  .ktv-v3239-action,.ktv-v3241-action{
    min-width:42px!important;
    min-height:38px!important;
    padding:0 10px!important;
    flex:0 0 auto!important;
  }
}

@media (max-width:420px){
  #live .player-drawer{height:80dvh!important}
  #live video,#live .video-wrap video{max-height:29dvh!important}
}