:root{
    --bg: #f7fafc;
    --nav-start: #0f172a;
    --nav-end: #081226;
    --accent: #ff6b6b;
    --muted: #94a3b8;
    --glass: rgba(255,255,255,0.06);
}

*{box-sizing:border-box;margin:0;padding:0}

body{font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#0f172a;line-height:1.5}

.navbar{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.7rem 1rem;
    background:linear-gradient(90deg,var(--nav-start),var(--nav-end));
    color:#fff;
    z-index:1000;
    box-shadow:0 8px 20px rgba(2,6,23,0.12);
}

.navbar .logo{font-size:1.125rem;font-weight:700;color:#fff;margin-left:8px}

.navbar ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center;margin-left:auto}

.navbar ul li{flex:0 0 auto}

.navbar ul li a{color:rgba(255,255,255,0.95);text-decoration:none;padding:.5rem .75rem;border-radius:8px;transition:background .18s,color .18s;font-weight:500;white-space:nowrap}

.navbar ul li a:hover,.navbar ul li a.active{background:var(--glass);color:var(--accent)}

/* Ensure horizontal on small screens with scroll if needed */
@media (max-width:800px){
    .navbar ul{gap:.6rem;padding:.2rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
}