:root{--primary:#00c896;--dark-bg:#0d0d0d;--light-bg:#f4f4f4;}

body{font-family:'Segoe UI',sans-serif;background:var(--dark-bg);color:#fff;scroll-behavior:smooth;overflow-x:hidden;}
.light-mode{background:var(--light-bg);color:#111;}

#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}
#progressBar{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,#00c896,#00ffcc);width:0%;z-index:2000;}

.navbar{backdrop-filter:blur(10px);background:rgba(0,0,0,0.6)!important;}
.light-mode .navbar{background:rgba(255,255,255,0.8)!important;}
.nav-link:hover{color:var(--primary)!important;}

section{padding:50px 0;}
section:not(.hero){border-top:1px solid rgba(255,255,255,0.05);}
.light-mode section:not(.hero){border-top:1px solid rgba(0,0,0,0.05);}

.hero{min-height:75vh;display:flex;align-items:center;}
.typing{color:var(--primary);font-weight:bold;}

.btn-custom{background:var(--primary);color:#000;font-weight:bold;}
.btn-custom:hover{background:#00ffcc;}

.offcanvas{width:50%!important;backdrop-filter:blur(20px);}

.list-group-item{padding:18px 25px;font-size:1.05rem;transition:0.3s;}
.list-group-item:hover{background:rgba(0,200,150,0.1);transform:translateX(5px);}
.list-group-item i{transition:0.3s;}
.list-group-item:hover i{transform:translateX(5px);}

.glass{background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border-radius:15px;padding:10px;border:1px solid rgba(255,255,255,0.1);transition:0.4s;}

.project-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);border-radius:15px;padding:25px;transition:0.4s;transform:translateY(30px);opacity:0;}
.project-card.show{transform:translateY(0);opacity:1;}
.project-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(0,200,150,0.3);}

.reveal{opacity:0;transform:translateY(60px);transition:all 0.9s cubic-bezier(.17,.67,.83,.67);}
.reveal.active{opacity:1;transform:translateY(0);}
.skill-card {background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border-radius: 15px; padding: 20px 10px; text-align: center; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,200,150,0.3);}
.skill-card i {
    font-size: 2rem;
    color: #00c896;
    margin-bottom: 10px;
}

.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,200,150,0.5);
}

@media (max-width: 576px) {
    .skill-card { margin-bottom: 15px; }
}
#topBtn{position:fixed;bottom:20px;right:20px;background:var(--primary);color:#000;border:none;padding:12px 15px;border-radius:50%;display:none;}
.dropdown-menu{background:rgba(0,0,0,0.9); backdrop-filter:blur(10px);}
.dropdown-item:hover{background:rgba(0,200,150,0.15);color:#00c896;}
#alertIcon i{animation:bounce 0.6s ease forwards;}
@keyframes bounce{0%{transform:scale(0);}50%{transform:scale(1.3);}100%{transform:scale(1);}}

footer{background:#000;padding:40px 0;}

@media(max-width:768px){.offcanvas{width:80%!important;}}