:root{--nav-bg:#0D0D0D;--text:#fff;--text2:rgba(255,255,255,.6)}
[data-theme="light"]{--nav-bg:#FAFAFA;--text:#111;--text2:rgba(0,0,0,.6)}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;background:var(--nav-bg)}

/* Desktop */
.nav-dt{height:56px;padding:0 32px;gap:8px}
.nav-dt .logo{font-size:20px;font-weight:800;color:var(--text);text-decoration:none;margin-right:16px}
.nav-dt .logo span{color:#00d478}
.nav-dt a{font-size:15px;font-weight:500;color:var(--text2);text-decoration:none;padding:8px 14px;border-radius:8px}
.nav-dt a:hover{color:var(--text);background:rgba(128,128,128,.1)}
.nav-dt .btn-login{background:#00d478!important;color:#000!important;font-weight:600;padding:8px 18px!important}
.nav-dt .theme-btn{background:none;border:none;color:var(--text2);cursor:pointer;padding:8px;border-radius:8px}

/* Mobile */
.nav-mb{height:48px;padding:0 16px;gap:4px;overflow-x:auto;display:none}
.nav-mb::-webkit-scrollbar{display:none}
.nav-mb .logo{font-size:17px;font-weight:800;color:var(--text);text-decoration:none;margin-right:4px;flex-shrink:0}
.nav-mb .logo span{color:#00d478}
.nav-mb a{font-size:15px;font-weight:500;color:var(--text2);text-decoration:none;padding:6px 8px;border-radius:6px;flex-shrink:0}
.nav-mb a:hover{color:var(--text)}
.nav-mb .btn-login{background:#00d478!important;color:#000!important;font-weight:600;padding:6px 12px!important}
.nav-mb .theme-btn{background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;border-radius:6px;flex-shrink:0}

@media(max-width:768px){.nav-dt{display:none}.nav-mb{display:flex}}