:root{
 --primary:#0d6efd;--dark:#0f172a;--light:#f8fbff;--text:#475569;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#fff;color:var(--dark);line-height:1.6}
section{position:relative}
.bg-primary{background:linear-gradient(135deg,#0d6efd,#4f8dfd)!important}
h1,h2,h3,h4,h5{font-weight:700}
a{text-decoration:none;transition:.3s}
.card{border:none;border-radius:18px;overflow:hidden;transition:.35s;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(13,110,253,.18)}
.card img{transition:.4s}
.card:hover img{transform:scale(1.05)}
.badge{border-radius:20px;padding:.5rem .8rem}
#blogSearch{border-radius:50px;padding:15px 20px;border:none;box-shadow:0 10px 25px rgba(0,0,0,.1)}
.filter-btn{border-radius:30px;padding:.6rem 1.2rem}
.filter-btn:hover,.filter-btn.active{background:#fff!important;color:#0d6efd!important}
.list-group-item{border:none;padding:.8rem 0}
.list-group-item:hover{color:#0d6efd;padding-left:8px}
.btn{border-radius:40px;padding:.7rem 1.5rem;font-weight:600}
.btn-primary:hover{transform:translateY(-2px)}
.card-body h5{margin:.8rem 0}
.card-body p{color:var(--text)}
.badge.bg-light{margin:4px;padding:.5rem .8rem}
input.form-control{border-radius:40px}
footer{background:#08111f;color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#0d6efd;border-radius:10px}
.fade-up{animation:fadeUp .8s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.float{animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
@media(max-width:992px){
 h1.display-4{font-size:2.4rem}
 .card img{height:220px;object-fit:cover}
}
@media(max-width:768px){
 h1.display-4{font-size:2rem}
 .btn{width:100%}
 .filter-btn{margin-bottom:8px}
}
@media(max-width:576px){
 .breadcrumb{font-size:.85rem}
 #blogSearch{font-size:.95rem}
}
.dark-mode{background:#0b1220;color:#e5e7eb}
.dark-mode .card{background:#172033;color:#fff}
.dark-mode .card-body p{color:#cbd5e1}
.dark-mode .list-group-item{background:transparent;color:#fff}