.nav{
      margin-top:8px;
      display:flex; flex-direction:column; gap:4px;
      padding:0 6px;
    }
    .nav a{
      text-decoration:none;
      color:var(--muted);
      display:flex; align-items:center; gap:10px;
      padding:10px 10px;
      border-radius:12px;
      font-size:13px;
      transition: all .15s ease;
      border:1px solid transparent;
    }
    .nav a:hover{
      background: rgba(99,91,255,.10);
      color:var(--text);
      border-color: rgba(99,91,255,.20);
    }
    .nav a.active{
      background: rgba(99,91,255,.14);
      color:var(--text);
      border-color: rgba(99,91,255,.22);
    }
    .nav .icon{
      width:18px; height:18px;
      display:inline-flex; align-items:center; justify-content:center;
      color: var(--muted-2);
    }
    .nav a.active .icon{ color: var(--brand); }


    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:18px;
    }

    .title{
      display:flex; flex-direction:column;
      gap:2px;
    }
    .title h2{
      margin:0;
      font-size:18px;
      letter-spacing:.2px;
    }
    .title p{
      margin:0;
      color:var(--muted);
      font-size:13px;
    }

    
    .actions{
      display:flex; align-items:center; gap:10px;
      flex-wrap:wrap;
    }

    .search{
      position:relative;
      min-width: 280px;
      flex: 1 1 280px;
      max-width: 420px;
    }
    .search input{
      width:100%;
      padding:10px 12px 10px 36px;
      border-radius: 14px;
      border:1px solid var(--border);
      background: var(--panel);
      color:var(--text);
      outline:none;
      box-shadow: var(--shadow-sm);
    }
    .search input::placeholder{ color: var(--muted-2); }
    .search .magnify{
      position:absolute; left:12px; top:50%;
      transform:translateY(-50%);
      width:16px; height:16px;
      color: var(--muted-2);
    }