.header{background:rgba(44,52,60,.9);backdrop-filter:blur(10px);padding:20px 0;position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.header .container{display:flex;justify-content:space-between;align-items:baseline;max-width:1200px;margin:0 auto}
.logo-text{font-size:28px;color:#00ddeb;text-transform:uppercase;position:relative;animation:glow 2s infinite alternate}
@keyframes glow{
0%{text-shadow:0 0 5px #00ddeb}
100%{text-shadow:0 0 20px #00ddeb}
}
.nav ul{list-style:none;display:flex;gap:30px}
.nav ul li a{color:#fff;text-decoration:none;font-size:16px;position:relative;transition:color .3s}
.nav ul li a::after{content:"";position:absolute;width:0;height:2px;background:#00ddeb;bottom:-5px;right:0;transition:width .3s}
.nav ul li a:hover::after{width:100%}
.nav ul li a:hover{color:#00ddeb}
.auth-buttons{display:flex;gap:10px}
.auth-buttons .btn{padding:10px 20px;border-radius:25px;text-decoration:none;font-size:14px;transition:transform .3s,box-shadow .3s,background .3s;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(45deg,#00ddeb,#00b7c2);color:#222a32;border:none}
.btn-primary:hover::before{left:100%}
.btn-outline{border:2px solid #00ddeb;color:#00ddeb;background:0 0}
.btn-outline:hover::before{left:100%}
.btn-outline:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,221,235,.4)}
.btn-profile{background:linear-gradient(45deg,#2c343c,#3a4550);color:#00ddeb;border:2px solid #00ddeb}
.btn-logout{background:linear-gradient(45deg,#f44,#f66);color:#fff;border:none}
.header-icons{display:flex;gap:15px;align-items:center;position:relative;top:4px}
.notification-icon{position:relative;font-size:20px;color:#00ddeb;cursor:pointer;transition:transform .3s}
.notification-icon:hover{transform:scale(1.2)}
.notification-count{position:absolute;top:-10px;right:-10px;background:#f44;color:#fff;font-size:12px;padding:2px 6px;border-radius:50%}
.cart-icon{font-size:20px;color:#00ddeb;cursor:pointer;transition:transform .3s}
.cart-icon:hover{transform:scale(1.2)}
.notification-popup{display:none;position:absolute;top:80px;right:20px;background:rgba(44,52,60,.95);backdrop-filter:blur(10px);border-radius:15px;width:300px;box-shadow:0 10px 20px rgba(0,221,235,.3);z-index:2000;animation:slideIn .3s ease-in-out}
.notification-popup.active{display:block}
@keyframes slideIn{
from{transform:translateY(-20px);opacity:0}
to{transform:translateY(0);opacity:1}
}
.notification-header{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(0,221,235,.2)}
.notification-header h3{font-size:18px;color:#00ddeb}
.close-popup{font-size:20px;color:#00ddeb;cursor:pointer;transition:transform .3s}
.close-popup:hover{transform:rotate(90deg)}
.notification-list{max-height:200px;overflow-y:auto;padding:10px}
.notification-list::-webkit-scrollbar{width:6px}
.notification-list::-webkit-scrollbar-track{background:#222a32;border-radius:10px}
.notification-list::-webkit-scrollbar-thumb{background:#00ddeb;border-radius:10px}
.notification-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;margin-bottom:10px;background:rgba(0,221,235,.1)}
.notification-item i{font-size:18px;color:#00ddeb}
.notification-item p{font-size:14px;color:#ddd;flex:1}
.notification-item .time{font-size:12px;color:#aaa}
.menu-toggle{display:none;font-size:24px;color:#00ddeb;cursor:pointer;position:relative;top:9px}
@media (max-width:768px){
.header .container{flex-wrap:wrap}
.nav{display:none;width:100%;text-align:center}
.nav.active{display:block}
.nav ul{flex-direction:column;gap:20px;padding:20px 0}
.menu-toggle{display:block}
.auth-buttons{margin-top:10px}
.notification-popup{width:90%;right:5%;top:100px}
header.header{position:relative}
h1.logo-text{font-size:20px}
.menu-toggle{position:relative;top:5px}
}