*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#08142c;color:#fff;display:flex;height:100vh;overflow:hidden}
.sidebar{width:240px;background:#0d1c3a;display:flex;flex-direction:column;padding:25px 20px;box-shadow:2px 0 15px rgba(0,0,0,0.3);animation:slideIn 1s ease}
.logo-area{display:flex;align-items:center;gap:10px;margin-bottom:40px}
.logo-area img{width:45px;filter:drop-shadow(0 0 8px #005dff);animation:float 3s ease-in-out infinite}
.logo-area h2{font-size:1.2rem;line-height:1.2}
.logo-area small{font-size:.8rem;color:#b0b8ff}
.sidebar nav{display:flex;flex-direction:column;gap:15px}
.sidebar a{text-decoration:none;color:#d0d8ff;background:rgba(255,255,255,0.05);padding:10px 15px;border-radius:8px;transition:.3s}
.sidebar a:hover{background:linear-gradient(90deg,#004cff,#007bff);color:#fff;box-shadow:0 0 15px rgba(0,123,255,0.6);transform:translateX(4px)}
.sidebar .bottom{margin-top:auto;font-size:.8rem;color:#aaa;text-align:center}
.main{flex:1;padding:40px;overflow-y:auto;animation:fadeIn 1s ease}
.container h1{font-size:1.8rem;margin-bottom:8px;font-weight:600}
.container p{color:#b8c1ff;margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{background:#0f2350;border-radius:16px;padding:25px 20px;text-align:center;transition:.3s;cursor:pointer}
.card:hover{transform:translateY(-6px);box-shadow:0 0 20px #004cffaa}
.icon{font-size:2rem;margin-bottom:15px;transition:.4s}
.card:hover .icon{transform:scale(1.1) rotate(5deg)}
.card h3{font-size:1.1rem;margin-bottom:6px}
.card p{color:#b8c1ff;font-size:.9rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{transform:translateX(-100px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#0d3b66;border-radius:10px}