:root{
  --bg:#0d0d0d; --text:#fff; --muted:#bfbfbf; --card:#151515; 
  --accent:#e50914; --stroke:rgba(255,255,255,.12);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; margin:0; padding:0}

/* Header */
.qw-header{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; 
  justify-content:space-between; padding:14px 20px; background:rgba(0,0,0,.95);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--stroke);
}
.qw-brand{display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none}
.qw-brand h1{font-size:1.1rem; letter-spacing:.16em; color:var(--accent); font-weight:800}
.qw-tag{font-size:.75rem; border:1px solid var(--stroke); padding:2px 8px; border-radius:999px; opacity:.9}

/* Desktop Nav */
.qw-nav{display:flex; gap:1.5rem}
.qw-nav a{color:var(--muted); text-decoration:none; font-weight:500; transition:color .2s}
.qw-nav a.active,.qw-nav a:hover{color:var(--accent)}

/* Main */
.qw-main{padding:20px 15px 100px; max-width:1240px; margin:0 auto}
.qw-head{text-align:center; margin-bottom:20px}
.qw-head h2{font-size:1.8rem; font-weight:800; margin-bottom:6px; 
  background:linear-gradient(135deg,#e50914 0%,#f40612 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.qw-sub{color:var(--muted); font-size:.95rem}

/* TikTok-Style Grid - Small Cards */
.qw-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); 
  gap:10px; 
  margin-top:16px;
  padding-bottom:20px;
}

/* Compact Card */
.qw-card{
  background:var(--card); border:1px solid var(--stroke); border-radius:12px; 
  overflow:hidden; transition:transform .2s ease,box-shadow .2s;
  display:flex; flex-direction:column;
}
.qw-card:hover{transform:translateY(-4px); box-shadow:0 8px 24px rgba(229,9,20,.25)}

.qw-thumb{width:100%; height:220px; object-fit:cover; background:#222; display:block}
.qw-info{padding:10px; flex:1}
.qw-title{font-size:.9rem; font-weight:700; margin:0 0 4px; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.qw-meta{font-size:.75rem; color:var(--muted); text-transform:capitalize; margin:0}

.qw-btn{
  display:block; margin:8px; background:var(--accent); color:#fff; 
  text-align:center; padding:10px; border-radius:8px; text-decoration:none; 
  font-weight:700; font-size:.85rem; transition:background .2s,transform .2s;
}
.qw-btn:hover{background:#f40612; transform:scale(1.02)}

/* Modal */
.qw-modal{display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center}
.qw-modal.show{display:flex}
.qw-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.9); cursor:pointer}
.qw-content{
  position:relative; width:min(95vw,980px); height:75vh; 
  background:#000; border-radius:14px; overflow:hidden; 
  border:1px solid var(--stroke); z-index:1
}
.qw-content iframe{width:100%; height:100%; border:0}
.qw-close{
  position:absolute; right:10px; top:10px; background:rgba(255,255,255,.15); 
  border:0; border-radius:999px; height:36px; width:36px; color:#fff; 
  font-size:24px; cursor:pointer; z-index:2; backdrop-filter:blur(10px);
  transition:background .2s; line-height:1; display:flex; align-items:center; justify-content:center;
}
.qw-close:hover{background:rgba(255,255,255,.25)}

/* Bottom Navigation (Mobile) */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:999; 
  background:rgba(0,0,0,.95); backdrop-filter:blur(20px); 
  border-top:1px solid var(--stroke); display:none; justify-content:space-around; 
  padding:8px 0; box-shadow:0 -4px 12px rgba(0,0,0,.5)
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; gap:4px; 
  color:var(--muted); text-decoration:none; font-size:.7rem; 
  padding:8px 12px; transition:color .2s; flex:1; max-width:80px;
}
.nav-item i{font-size:1.3rem; transition:transform .2s}
.nav-item.active,.nav-item:hover{color:var(--accent)}
.nav-item.active i{transform:scale(1.15)}
.nav-item span{margin-top:2px; font-weight:500}

/* Mobile Optimizations */
@media (max-width:768px){
  /* Hide desktop nav */
  .qw-nav{display:none}
  
  /* Show bottom nav */
  .bottom-nav{display:flex}
  
  /* Adjust main padding for bottom nav */
  .qw-main{padding-bottom:90px}
  
  /* Smaller grid on mobile - 2 columns */
  .qw-grid{
    grid-template-columns:repeat(2,1fr); 
    gap:8px;
  }
  
  /* Compact cards for mobile */
  .qw-card{border-radius:10px}
  .qw-thumb{height:240px}
  .qw-info{padding:8px}
  .qw-title{font-size:.85rem; -webkit-line-clamp:1}
  .qw-meta{font-size:.7rem}
  .qw-btn{margin:6px; padding:8px; font-size:.8rem; border-radius:6px}
  
  /* Header adjustments */
  .qw-header{padding:12px 16px}
  .qw-brand h1{font-size:1rem}
  
  /* Modal mobile */
  .qw-content{width:95vw; height:60vh; border-radius:12px}
  .qw-close{right:8px; top:8px; height:32px; width:32px; font-size:20px}
  
  /* Head section */
  .qw-head h2{font-size:1.5rem}
  .qw-sub{font-size:.85rem}
}

/* Very small screens */
@media (max-width:375px){
  .qw-grid{grid-template-columns:repeat(2,1fr); gap:6px}
  .qw-thumb{height:200px}
  .qw-title{font-size:.8rem}
  .nav-item{font-size:.65rem; padding:6px 8px}
  .nav-item i{font-size:1.2rem}
}

/* Tablet landscape */
@media (min-width:769px) and (max-width:1024px){
  .qw-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
  .qw-thumb{height:240px}
}

/* Large screens */
@media (min-width:1400px){
  .qw-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
  .qw-thumb{height:260px}
}