/* =========================
   APP – NETFLIX DARK UI
========================= */
:root{
 --bg:#0f0f0f;
 --card:#181818;
 --red:#e50914;
 --text:#fff;
 --muted:#aaa;
}

*{box-sizing:border-box}

body{
 background:var(--bg);
 color:var(--text);
 margin:0;
 font-family:system-ui,-apple-system;
}

/* ================= HEADER ================= */
.app-header{
 position:fixed;
 top:0;left:0;right:0;
 height:56px;
 background:rgba(15,15,15,.95);
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:1000;
 backdrop-filter:blur(6px);
}
.app-header img{height:28px}

/* ================= CONTENT ================= */
.app-content{
 padding-top:60px;
 padding-bottom:70px;
}

/* ================= ROWS ================= */
.app-row{
 margin:18px 0;
}
.app-row h3{
 margin:0 12px 10px;
 font-size:16px;
 font-weight:800;
}

.row-scroll{
 display:flex;
 gap:12px;
 overflow-x:auto;
 padding:0 12px;
 scroll-snap-type:x mandatory;
}
.row-scroll::-webkit-scrollbar{display:none}

/* ================= SLIDER ================= */
.app-slider .swiper-slide{
 width:140px;
}

/* ================= CARDS ================= */
.app-card{
 display:block;
 min-width:130px;
 background:var(--card);
 border-radius:14px;
 overflow:hidden;
 color:#fff;
 text-decoration:none;
 box-shadow:0 8px 25px rgba(0,0,0,.6);
 transition:.25s;
}
.app-card img{
 width:100%;
 aspect-ratio:2/3;
 object-fit:cover;
 display:block;
}
.app-card span{
 display:block;
 padding:8px;
 font-size:13px;
 font-weight:600;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

.app-card:hover{
 transform:translateY(-4px);
}

/* ================= APP GRID (ARCHIVE) ================= */
.app-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:10px;
 padding:12px;
}

/* ================= CATEGORIES ================= */
.app-page{
 padding:12px;
}

.app-header-simple h1{
 font-size:20px;
 font-weight:800;
 margin:0 0 15px;
}

.app-cats-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:14px;
}

.cat-card{
 position:relative;
 background:#0f0f0f;
 border-radius:16px;
 padding:26px 14px;
 text-align:center;
 color:#fff;
 font-weight:700;
 font-size:15px;
 overflow:hidden;
 box-shadow:0 10px 30px rgba(0,0,0,.6);
 transition:.25s;
}

.cat-card::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(135deg,#e50914,#b00610);
 opacity:0;
 transition:.25s;
}
.cat-card span{position:relative;z-index:2}
.cat-card:hover::before{opacity:.9}
.cat-card:hover{transform:translateY(-4px)}

/* ================= SEARCH ================= */
.smart-filters{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:10px;
 margin-bottom:14px;
}

.smart-filters select{
 background:#141414;
 color:#fff;
 border:1px solid #222;
 border-radius:10px;
 padding:12px;
 font-size:13px;
}

.smart-filters select:focus{
 border-color:var(--red);
 outline:none;
}

.smart-reset{
 background:var(--red);
 border:none;
 color:#fff;
 padding:12px;
 width:100%;
 border-radius:10px;
 font-weight:800;
 margin-bottom:15px;
}

/* ================= SINGLE ================= */
.app-single .image img{
 border-radius:16px;
 box-shadow:0 10px 30px rgba(0,0,0,.7);
}

.app-watchlist-btn{
 background:#1c1c1c;
 color:#fff;
 border:none;
 padding:10px 14px;
 border-radius:12px;
 font-weight:700;
 margin-bottom:10px;
}
.app-watchlist-btn.active{
 background:var(--red);
}

/* ================= BOTTOM NAV ================= */
.app-bottom-nav{
 position:fixed;
 bottom:0;left:0;right:0;
 height:56px;
 background:#111;
 display:flex;
 border-top:1px solid #222;
 z-index:1000;
}
.app-bottom-nav a{
 flex:1;
 text-align:center;
 color:#aaa;
 font-size:11px;
 text-decoration:none;
 padding-top:6px;
}
.app-bottom-nav a.active{color:var(--red)}
/* ===== Archive Mobile Only ===== */
.desktop-only{display:block}
.mobile-only{display:none}

@media (max-width:991px){
  .desktop-only{display:none!important}
  .mobile-only{display:block!important}

  .app-title{
    font-size:18px;
    font-weight:800;
    margin:12px;
  }

  .app-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    padding:12px;
  }
}
/* ===============================
   APP SINGLE – MOBILE ONLY
=============================== */
@media (max-width:768px){

  .app-single{
    padding-bottom:70px;
  }

  .MainSingle{
    display:flex;
    flex-direction:column;
  }

  .MainSingle .left{
    width:100%;
    order:1;
  }

  .MainSingle .SecondPart{
    width:100%;
    order:2;
    margin-top:12px;
  }

  .MainSingle .image img{
    width:100%;
    border-radius:14px;
  }

  .RightTaxContent{
    padding:0;
    margin-top:10px;
  }

  .RightTaxContent li{
    font-size:13px;
    padding:6px 0;
  }

  .app-watchlist-btn{
    width:100%;
    margin:10px 0;
    background:#e50914;
    border:none;
    padding:12px;
    border-radius:10px;
    font-weight:700;
    color:#fff;
  }

  .mobile-details-btn{
    margin:12px 0;
    padding:10px;
    border-radius:10px;
    background:#1c1c1c;
    text-align:center;
  }

  .StoryArea p{
    font-size:14px;
    line-height:1.7;
  }

}
@media (max-width:768px){

  .WatchArea{
    margin-top:20px;
  }

  .ServersList ul{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .ServersList ul li a{
    padding:12px;
    background:#141414;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:13px;
  }

  .ServersList ul li a em{
    font-style:normal;
  }

}
.app-watchlist-btn{
  background:#e50914;
  border:none;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  margin:10px 0;
}

.continue-page .app-grid,
.watchlist-page .app-grid{
  grid-template-columns:repeat(3,1fr);
}