html,body,#root{background:linear-gradient(135deg,#000)}.navbar-custom{position:fixed;top:0;left:0;right:0;z-index:999;background:#000;box-shadow:0 4px 12px #0006;animation:slideDown .4s ease-in-out}.navbar-container{max-width:1300px;width:90%;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#fff}.logo-section .logo{height:auto;width:auto}.nav-links{list-style:none;display:flex;gap:18px;align-items:center;margin:0;padding:0}.nav-item-link,.logout-btn{display:flex;align-items:center;gap:6px;text-decoration:none!important;font-weight:500;color:#fff;transition:color .3s ease}.nav-item-link:hover{color:#d70ecd;text-decoration:none!important}.nav-item-link.active{color:#fac106;text-decoration:none!important}.clock-section{font-size:.9rem;display:flex;gap:6px;align-items:center;white-space:nowrap}.mobile-toggle{display:none;background:none;border:none;font-size:1.5rem;color:#fff;cursor:pointer}.sidebar{display:none}.sidebar.open{left:0}@media (max-width: 768px){.nav-links,.clock-section{display:none}.mobile-toggle{display:block}.sidebar{display:block;position:fixed;top:64px;left:-260px;width:200px;background:#000;color:#fff;padding:20px;transition:left .3s ease-in-out;z-index:998;border-radius:0 0 20px;box-shadow:2px 0 10px #0000004d}.logo-section{width:100%;display:flex;justify-content:center;align-items:center}.sidebar-links{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px}.sidebar-links a,.sidebar-links button{font-size:1rem;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none!important;transition:color .3s ease}.sidebar-links a:hover{color:#c410b8;text-decoration:none!important}.sidebar-links a.active{color:#fac106;text-decoration:none!important}}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.animated-logo{font-size:18px;font-weight:700;padding:10px 20px;color:#fff;background-color:#000;border-radius:12px;display:inline-block;text-decoration:none!important;position:relative;z-index:1;background:linear-gradient(#000,#000) padding-box,conic-gradient(red,green,#00f,red) border-box;border:4px solid transparent;background-origin:border-box;background-clip:padding-box,border-box;animation:pingPongBorder 4s ease-in-out infinite alternate;background-size:300% 300%}@keyframes pingPongBorder{0%{background-position:0% 50%}to{background-position:100% 50%}}html,body,#root{height:100%;margin:0;padding:0;background:#000;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#ddd}.home-wrapper{display:flex;flex-direction:column;min-height:100vh;background:radial-gradient(circle at top left,#000,#020202 60%);padding-top:80px}.container{max-width:960px;margin:0 auto;padding:0 20px}.neon-text{color:#00ff7f;font-weight:700}.section-title{font-size:1.8rem;font-weight:700;color:#00ff7f;position:relative;display:inline-block;margin-bottom:25px}.section-title:after{content:"";display:block;width:60px;height:3px;background:#00ff7f;margin-top:8px}.contact-info{line-height:1.6;color:#aaa}.contact-info a{color:#00ff7f;text-decoration:none}.contact-info a:hover{text-decoration:underline}.skill-badge{display:inline-block;margin:4px;padding:6px 14px;border-radius:50px;background:#00ff7f;color:#000;font-weight:600;font-size:.85rem;box-shadow:0 0 12px #00ff7f80;transition:transform .3s,box-shadow .3s}.skill-badge:hover{transform:translateY(-3px);box-shadow:0 0 20px #00ff7fcc}.project-list{list-style:none;padding:0}.project-list li{margin-bottom:10px;position:relative;padding-left:25px}.project-list li:before{content:"✔";position:absolute;left:0;color:#00ff7f}.project-btn{display:inline-block;margin-top:20px;background:transparent;border:2px solid #00ff7f;color:#00ff7f;padding:12px 30px;border-radius:30px;font-weight:700;text-decoration:none;transition:all .3s ease;cursor:pointer}.project-btn:hover{background:#00ff7f;color:#000;box-shadow:0 0 20px #00ff7f}.fade-in-left{animation:fadeInLeft .8s ease}.fade-in-right{animation:fadeInRight .8s ease}.slide-up{animation:slideUp .8s ease}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.row{margin-bottom:60px}h1,h2,h5{color:#fff}p{color:#bbb;line-height:1.7}a{color:#00ff7f}a:hover{text-decoration:underline}.dashboard-container{background-color:#000;min-height:100vh;padding:100px 20px 60px;color:#fff;display:flex;flex-direction:column;align-items:center}.dashboard-header{text-align:center;margin-bottom:60px;animation:fadeInDown .6s ease}.dashboard-header h2{font-size:2.6rem;font-weight:700;color:#05ab3a;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px}.dashboard-header .subtitle{font-size:1.1rem;color:#aaa;font-style:italic}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;width:100%;max-width:1000px}.project-card{display:flex;flex-direction:column;justify-content:space-between;background:#111;border:2px solid #1f1f1f;border-radius:16px;padding:30px 25px;text-align:center;text-decoration:none!important;color:#fff;box-shadow:0 0 10px #00ffff0d;transition:all .35s ease;position:relative;overflow:hidden}.project-card:hover,.project-card:focus{text-decoration:none!important}.project-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#00bfff33,transparent 60%);opacity:0;transition:opacity .35s ease}.project-card:hover:before{opacity:1}.project-card:hover{transform:translateY(-5px);box-shadow:0 0 30px #00bfff66;border-color:#00bfff}.project-card h3{font-size:1.7rem;margin-bottom:14px;color:#05ab3a}.project-card p{font-size:1rem;line-height:1.5;color:#ccc}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.dashboard-container{padding:80px 15px 40px}.dashboard-header h2{font-size:2rem}.project-card{padding:25px 20px}}