*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#080808;color:white;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
.app{position:relative;width:100%;height:100dvh;overflow:hidden;background:#080808}
.feed{height:100%;width:100%;overflow:hidden}
.video-slide{position:relative;height:100%;width:100%;overflow:hidden;background:#050505}
.video-slide video{height:100%;width:100%;object-fit:contain;background:#050505}
.video-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.43),transparent 24%,transparent 55%,rgba(0,0,0,.75))}
.feed-header{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 12px) 17px 10px;gap:10px}
.brand{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900;white-space:nowrap;letter-spacing:.4px}
.brand img{width:38px;height:38px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.65))}
.brand b{color:#ff315d}
.feed-tabs{display:flex;align-items:center;gap:17px}
.feed-tabs button{position:relative;font-size:15px;font-weight:700;opacity:.65;padding:10px 0;white-space:nowrap}
.feed-tabs button.selected{opacity:1}
.feed-tabs button.selected:after{content:"";position:absolute;bottom:3px;left:25%;right:25%;height:3px;background:white;border-radius:5px}
.search-btn{font-size:30px;line-height:1}
.video-actions{position:absolute;right:12px;bottom:calc(105px + env(safe-area-inset-bottom));z-index:5;display:flex;flex-direction:column;gap:18px;align-items:center}
.video-actions button{font-size:36px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;text-shadow:0 2px 8px #000}
.video-actions small{font-size:12px;font-weight:700}
.video-actions .liked{color:#ff315d}
.video-info{position:absolute;bottom:calc(91px + env(safe-area-inset-bottom));left:15px;right:85px;z-index:5;text-shadow:0 2px 8px #000}
.username{font-size:17px;font-weight:800}
.username span{color:#ff315d}
.video-info p{font-size:14px;line-height:1.5}
.sound{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sound-toggle{position:absolute;right:14px;top:95px;z-index:6;font-size:23px}
.bottom-nav{position:absolute;bottom:0;left:0;right:0;z-index:15;min-height:calc(65px + env(safe-area-inset-bottom));padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:#090909;border-top:1px solid #252525;display:flex;align-items:center;justify-content:space-around}
.bottom-nav button{min-width:55px;display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.75}
.bottom-nav button.active{opacity:1}
.bottom-nav button span{font-size:25px;line-height:27px}
.bottom-nav button small{font-size:10px}
.bottom-nav .create-btn{font-size:34px;font-weight:900;line-height:35px;width:49px;min-width:49px;height:37px;border-radius:9px;background:linear-gradient(90deg,#29e4e1 0 22%,white 22% 78%,#ff315d 78%);color:#090909;opacity:1}
.toast{position:absolute;left:50%;bottom:105px;transform:translateX(-50%);background:rgba(30,30,35,.95);padding:12px 18px;border-radius:12px;font-size:13px;z-index:30;max-width:90%;width:max-content;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
@media(min-width:700px){
 .app{max-width:480px;margin:auto;border-left:1px solid #222;border-right:1px solid #222}
}
@media(max-width:390px){
 .brand span{display:none}
 .feed-tabs{gap:24px}
}

/* SHQIPONJA LIVE — FULL SCREEN VERTICAL FEED */
.feed{position:relative;overflow:hidden}
.video-slide{position:relative;overflow:hidden}
.video-slide.feed-moving{
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* Second slide for TikTok-style transitions */
#nextSlide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:#050505;
  transform:translateY(100%);
  pointer-events:none;
  visibility:hidden;
  overflow:hidden;
}

#nextSlide.feed-transition{
  visibility:visible;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#nextSlide .video-slide{
  height:100%;
}

/* SHQIPONJA LIVE — TIKTOK FULL SCREEN VIDEO */
.video-slide video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.video-slide #feedPhoto,
#nextSlide img{
  object-fit:cover!important;
}

/* SHQIPONJA LIVE — EDGE TO EDGE FEED */
.app,.feed,.video-slide{
  margin:0;
  padding:0;
}
.feed-header{
  background:transparent!important;
  pointer-events:none;
}
.feed-header button,
.feed-header .brand{
  pointer-events:auto;
}
.video-slide video{
  display:block;
  object-fit:cover;
}