/* 🖥️ Desktop Logo */
.desktop-logo { text-align:center; padding:12px; background:#fff; }
.desktop-logo img { max-height:60px; }
body.dark .desktop-logo { background:#1b263b; }
@media(max-width:768px){ .desktop-logo{ display:none!important; } }

body { 
  margin:0; 
  background:#f8f9fa;   /* ✅ Light default */
  font-family:'Inter',sans-serif; 
  color:#222; 
  transition:background .3s,color .3s; 
}

/* 🖥️ Desktop Category Bar */
.category-bar { 
  background:#fff; 
  border-bottom:1px solid #eee; 
  padding:14px 25px; 
  display:flex; 
  gap:18px; 
  justify-content:center; 
  flex-wrap:wrap; 
  position:sticky; 
  top:0; 
  z-index:100; 
}
.category-bar a { 
  text-decoration:none; 
  color:#333; 
  font-weight:600; 
  padding:8px 18px; 
  border-radius:25px; 
  background:#f5f5f5; 
  transition:all .25s ease; 
  white-space:nowrap; 
}
.category-bar a.active, 
.category-bar a:hover { 
  background:linear-gradient(135deg,#d32f2f,#b71c1c); 
  color:#fff; 
}

/* 🌙 Dark Mode Button (Desktop only) */
.toggle-dark { 
  position:absolute; 
  right:16px; 
  top:50%; 
  transform:translateY(-50%); 
  background:none; 
  border:none; 
  cursor:pointer; 
  font-size:18px; 
  z-index:150; 
}

/* 📱 Mobile Category Bar (Horizontal scroll) */
@media(max-width:768px){
  .category-bar { 
    background:#fff; 
    border:none; 
    padding:8px 6px; 
    display:flex; 
    flex-wrap:nowrap; 
    justify-content:flex-start; 
    overflow-x:auto; 
    white-space:nowrap; 
    gap:8px; 
    scrollbar-width:none; /* Firefox */
    -ms-overflow-style:none; /* IE */
    position:sticky;
    top:0;
    z-index:150;
  }
  .category-bar::-webkit-scrollbar { display:none; } /* Chrome/Safari */
  .category-bar a { 
    font-size:14px; 
    padding:6px 14px; 
    border-radius:15px; 
    background:#f2f2f2; 
    flex:0 0 auto; 
  }
  .toggle-dark { display:none!important; }
}

/* 🖥️ Desktop News Cards */
.desktop-view{ max-width:1200px; margin:auto; padding:20px; }
.news-card{ 
  display:flex; 
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:10px; 
  margin-bottom:22px; 
  box-shadow:0 2px 6px rgba(0,0,0,0.04); 
  overflow:hidden; 
  transition:background .3s, color .3s;
}
.news-card img, .carousel-inner img { 
  width:300px; 
  height:200px; 
  object-fit:cover; 
  flex-shrink:0; 
}
.news-body{ 
  flex:1; 
  padding:18px 20px; 
  display:flex; 
  flex-direction:column; 
  justify-content:space-between; 
}
.news-body h5{ font-size:20px; font-weight:600; margin-bottom:10px; color:#111; }
.news-body p{ font-size:15px; color:#444; line-height:1.6; margin-bottom:12px; text-align:justify; max-height:95px; overflow:hidden; }
.news-footer{ font-size:13px; color:#666; display:flex; justify-content:space-between; align-items:center; }
.news-footer a{ color:#d32f2f; font-weight:600; text-decoration:none; }

/* 📱 Mobile Swipe News */
.mobile-view{ display:none; }
@media(max-width:768px){ 
  .desktop-view{ display:none!important; } 
  .mobile-view{ display:block!important; } 
}
.swiper{ height:100vh; background:#f1f1f1; transition:background .3s, color .3s; }
.swiper-slide{ background:#fff; display:flex; flex-direction:column; overflow-y:auto; transition:background .3s, color .3s; }
.swiper-slide img{ width:100%; height:240px; object-fit:cover; }
.slide-content{ padding:18px; flex:1; display:flex; flex-direction:column; }
.slide-content h5{ font-size:20px; font-weight:600; margin-bottom:12px; color:#111; }
.slide-content p{ font-size:15px; line-height:1.7; color:#444; text-align:justify; margin-bottom:12px; }
.slide-content .news-footer{ font-size:13px; color:#777; margin-top:auto; }

/* 🌙 Dark Mode */
body.dark{ background:#0d1b2a; color:#e0e6ed; }
body.dark .category-bar{ background:#1b263b; border:none; }
body.dark .category-bar a{ background:#415a77; color:#e0e6ed; }
body.dark .category-bar a.active, 
body.dark .category-bar a:hover { background:#d32f2f; color:#fff; }
body.dark .news-card{ background:#1b263b; border:1px solid #415a77; }
body.dark .news-body h5{ color:#ffffff; }
body.dark .news-body p{ color:#dce3ea; }
body.dark .news-footer{ color:#aaa; }
body.dark .news-footer a{ color:#ff6b6b; }
body.dark .swiper{ background:#0d1b2a; }
body.dark .swiper-slide{ background:#1b263b; color:#e0e6ed; }
body.dark .slide-content h5{ color:#ffffff; }
body.dark .slide-content p{ color:#dce3ea; }
body.dark .slide-content .news-footer{ color:#aaa; }
body.dark .slide-content .news-footer a{ color:#ff6b6b; }